验证文本框 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26050863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validate Textbox Javascript
提问by helpmeimnoob
I am trying to validate the textbox in the login Xhtml and once I figured out the code, the section class'container' in the code is not working.
我正在尝试验证登录 Xhtml 中的文本框，一旦我弄清楚代码，代码中的部分类“容器”就不起作用。
How can I write the code and validate the textbox properly?
如何编写代码并正确验证文本框？
<head>
<script type = 'text/javascript'>
function validate() {
if (document.getElementById("login").value == "") {
alert("User name may not be blank");
} else if (document.getElementById("password").value == "") {
alert("Password may not be blank.");
}
}
</script>
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1> Login</h1>
<section class="container">
<div>
<form method="post" action="index.xhtml" onsubmit="return validate();">
<p>
<input type="text" name="login" value="" id="login" placeholder="Username or Email" />
<input type="password" name="password" value="" id="password" placeholder="Password" />
</p>
<p>
<label>
<input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer
</label>
</p>
<p class="submit">
<input type="submit" name="commit" value="Login" onclick="validate();" />
<button type="reset" value="Clear">Clear</button>
</p>
</form>
<form action= "http://localhost:8080/ChattBank/LoginServlet" method="post"/>
</div>
</section>
</body>
采纳答案by Johnroe Paulo Ca?amaque
EDIT
编辑
Try this: (Replace your forms with this)
试试这个：（用这个替换你的表格）
<input type="text" name="login" value="" id="login" placeholder="Username or Email" />
<input type="password" name="password" value="" id="password" placeholder="Password" />
</p>
<p>
<label>
<input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label>
</p>
<p class="submit">
<input type="submit" name="commit" value="Login" onclick="validate();" />
<button type="reset" value="Clear">Clear</button>
</p>
<script>
function validate() {
if (document.getElementById("login").value == "") {
alert("User name may not be blank");
} else if (document.getElementById("password").value == "") {
alert("Password may not be blank.");
}
}
</script>
Here is a working fiddle
这是一个工作小提琴
回答by Ryan Nghiem
You can use jquery validation. It's very simple.
您可以使用jquery 验证。这很简单。
<form method="post" action="index.xhtml" id="loginForm">
...
</form>
$("#loginForm").validate({
rules: {
"login": {
required: true
},
"password": {
required: true
},
messages: {
"login": "This field is required",
"password": "This field is required",
},
});
回答by Spencer Wieczorek
We are trying to use document.getElementById("login")and document.getElementById("password"), which are both null. Because your two input fields do not have idas an attribute. You will need to add that:
我们正在尝试使用document.getElementById("login")和document.getElementById("password")，它们都是null。因为您的两个输入字段没有id作为属性。您需要添加：
<input type="text" ... id="login" />
...
<input type="password" ... id="password" />
Also validate()takes no attributes, so don't pass thison the logininput.
还validate()需要没有属性，所以不及格this的login输入。
