javascript 验证我的表格？“请填写必填字段”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15392846/
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
Validation on my form? "Please fill in required fields"
提问by John Kee
I have a username form. Which have 2 fields, username and password. Basically I want it so if the user has not entered the fields and pressed 'submit' an error displays like "Please enter the required fields"
我有一个用户名表格。其中有 2 个字段，用户名和密码。基本上我想要它，所以如果用户没有输入字段并按下“提交”，则会显示错误，例如“请输入必填字段”
I know it's possible with JavaScript or PHP but unsure how to do it.
我知道使用 JavaScript 或 PHP 是可能的，但不确定如何去做。
Here is the code of the user and password form:
这是用户和密码表单的代码：
<div id="sessionContainer" class="clearfix">
<div class="content">
<form action="goto.php" class=" sign-in" method="post">
<div style="margin:0;padding:0"></div>
<h3>Enter Details</h3>
<p><font size="-1">Please enter your details</font></p><br>
<div class="clearfix">
<label for="">Username or email address</label><br>
<input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" />
</div>
<div class="clearfix">
<label for=""><br>
Password</label><br>
<input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" />
</div>
<p class="remember"> </p>
<p class="remember">
<button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="submit" tabindex=5>Sign in</button>
</p>
Thanks
谢谢
回答by Josh Miller
<?php if(!isset($_POST['email']) || !isset($_POST['password'])
This code will check if either of those fields has a value. If it does not, you can output an error message. The code in the whole context is as follows:
此代码将检查这些字段中的任何一个是否具有值。如果没有，您可以输出错误消息。整个上下文中的代码如下：
<?php if(!isset($_POST['email']) || !isset($_POST['password']): ?>
<div>Please fill in all fields!</div>
<?php endif; ?>
回答by Hackerman
This is my answer...in clasic javascript xD:
这是我的答案...在 clasic javascript xD 中：
<html>
<head>
<script type="text/javascript">
function validar()
{
var right = 1;
if(document.getElementById('email').value.length==0)
{
right = 0;
document.getElementById('emptymail').innerHTML = "Empty Mail o Username";
}
if(document.getElementById('password').value.length==0)
{
right = 0;
document.getElementById('emptypass').innerHTML = "Empty Password";
}
if(right == 1)
{
document.forms["formu"].submit();
}
}
</script>
</head>
<body>
<form action="goto.php" class=" sign-in" method="post" name="formu" id="formu">
<div style="margin:0;padding:0"></div>
<h3>Enter Details</h3>
<p><font size="-1">Please enter your details</font></p><br>
<div class="clearfix">
<label for="">Username or email address</label><br>
<input class="xlarge" id="email" name="email" tabindex="1" type="text" value="" /><div id="emptymail"></div>
</div>
<div class="clearfix">
<label for=""><br>
Password</label><br>
<input class="xlarge" id="password" name="password" tabindex="2" type="password" value="" /><div id="emptypass"></div>
</div>
<p class="remember"> </p>
<p class="remember">
<button class="btn btn-m btn-blue" id="signin_submit" name="commit" type="button" tabindex=5 onclick="validar();">Sign in</button>
</p>
</form>
</body>
</html>
Saludos ;)
萨鲁多斯 ;)
回答by Bjoern
HTML only solution using the requiredattribute (works only in newer browsers):
仅使用该required属性的HTML 解决方案（仅适用于较新的浏览器）：
<input required="required" />
An example how to do a jscript based solution can be found here, hereor this one with a little jquery help.
可以在此处、此处或此带有一点 jquery 帮助的示例中找到如何执行基于 jscript 的解决方案的示例。
回答by Sumit Bijvani
Use jQuery Validatefor validations
使用jQuery Validate进行验证
Download it from hereand call it. and then add this code
从这里下载并调用它。然后添加此代码
rules:
{
email:
{
required: true
}
},
messages:
{
email:
{
required: "Please enter your email."
}
}
OR simply Use HTML 5 validations
或者简单地使用 HTML 5 验证
<input id="email" name="email" type="text" value="" required />
回答by rbedger
To do it using JavaScript, you are looking for the OnSubmit attribute of your form
要使用 JavaScript 执行此操作，您正在寻找表单的 OnSubmit 属性
There are numerous things you can do if the function you called with OnSubmit fails (returns false), but as an example this code will show a popup box
如果您使用 OnSubmit 调用的函数失败（返回 false），您可以做很多事情，但作为示例，此代码将显示一个弹出框
<script>
function checkForm()
{
if (document.getElementById('email').value.length==0 || document.getElementById('password').value.length==0)
(
alert("fill in required fields")
return false;
)
return true;
}
<script>
Then in your form tag you put
然后在你的表单标签中放置
<form onsubmit="return checkForm()" ...
回答by gashu
var $form = $('form'),
$user = $('#email),
$pass = $('#password');
$form.on('submit', function(e) {
e.preventDefault(); // stop the default behavior
if ($user.text().length === 0) {
$user.addClass('error'); // do something with the error class or add attribute 'required'
} else if ($pass.text().length === 0) {
// do something else
} else if ($user.text().length > 0 && $pass.text().length > 0) {
// post the form
$.ajax({
url: //URL where you send,
data: $form.serialize(),
success: function(e) { // do something },
error: function(e) { // do something }
});
}
}
