不使用插件的 jQuery 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18211128/
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
Form validation in jQuery without using plugin
提问by TNK
I want to perform client-side validation of a simple form using jQuery, but I can't use any plugins for validation. I want to display any error messages in a single alert box.
我想使用 jQuery 对简单表单执行客户端验证，但我无法使用任何插件进行验证。我想在单个警报框中显示任何错误消息。
This is my form:
这是我的表格：
<form action="" method="post" class="a">
Name : <input type="text" class="text" name="name" id="name" /> <br/>
Address : <input type="text" class="text" name="address" id="address" /> <br/>
Email: <input type="text" class="text" name="email" id="email" /> <br/>
<input type="button" id="submit" value="Submit" name="submit" />
</form>
If a user submits the form without filling any inputs then I need to display 3 error messages in single alert box. Like this
如果用户在没有填写任何输入的情况下提交表单，那么我需要在单个警报框中显示 3 条错误消息。像这样
Name can not be empty.
Address can not be empty.
email can not be empty.
If only one or two fields remain empty, then I need to control error message according the situation.
如果只有一两个字段为空，那么我需要根据情况控制错误消息。
Here I tried it using jQuery. But the alerts display in separate boxes:
在这里，我使用 jQuery 进行了尝试。但是警报显示在单独的框中：
My jQuery:
我的jQuery：
$('#submit').on('click', function() {
valid = true;
if ($('#name').val() == '') {
alert ("please enter your name");
valid = false;
}
if ($('#address').val() == '') {
alert ("please enter your address");
valid = false;
}
});
Here is a fiddle.
这是一个小提琴。
Can anybody tell me how can I figure this out? Thank you.
谁能告诉我如何解决这个问题？谢谢你。
回答by ninja
Loop through each input element in the form, and check if it has a value. If not append the error message to a string which you later alert out if valid is false.
循环遍历表单中的每个输入元素，并检查它是否有值。如果没有将错误消息附加到一个字符串中，如果有效为假，您稍后会提醒该字符串。
$('#submit').on('click', function() {
var valid = true,
message = '';
$('form input').each(function() {
var $this = $(this);
if(!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if(!valid) {
alert(message);
}
});
Fiddle: http://jsfiddle.net/WF2J9/17/
回答by Rory McCrossan
If you only want 1 alert to appear at a time you need to check the state of validfor each condition:
如果您只想一次出现 1 个警报，则需要检查valid每个条件的状态：
$('#submit').on('click', function() {
valid = true;
if (valid && $('#name').val() == '') {
alert ("please enter your name");
valid = false;
}
if (valid && $('#address').val() == '') {
alert ("please enter your address");
valid = false;
}
return valid;
});
回答by maverickosama92
try following:
尝试以下操作：
$('#submit').on('click', function() {
var valid = true,
errorMessage = "";
if ($('#name').val() == '') {
errorMessage = "please enter your name \n";
valid = false;
}
if ($('#address').val() == '') {
errorMessage += "please enter your address\n";
valid = false;
}
if ($('#email').val() == '') {
errorMessage += "please enter your email\n";
valid = false;
}
if( !valid && errorMessage.length > 0){
alert(errorMessage);
}
});
working fiddle here: http://jsfiddle.net/WF2J9/24/
在这里工作小提琴：http: //jsfiddle.net/WF2J9/24/
i hope it helps.
我希望它有帮助。
回答by Prince Bhatt
form validation:
表单验证：
This code is provided for the simple form validation using jquery.you can use this for validation in your form.
此代码是为使用 jquery 的简单表单验证提供的。您可以在表单中使用此代码进行验证。
Thanks
谢谢
<form action="" method="post" name="ContactForm" id="ContactForm1">
<div id='message_post'></div>
<div class="input-group"> <span class="input-group-addon"></span>
<input type="text" name="fname" class="form-control" placeholder="First Name *">
</div>
<div class="input-group"> <span class="input-group-addon"></span>
<input type="text" name="lname" required="required" class="form-control" placeholder="Last Name *">
</div>
<div class="input-group"> <span class="input-group-addon"></span>
<input type="text" name="phone" required="required" class="form-control" placeholder="Phone (bh) *">
</div>
<div class="input-group"> <span class="input-group-addon"></span>
<input type="text" name="email" required="required" class="form-control" placeholder="Email *">
</div>
<div class="input-group"> <span class="input-group-addon"></span>
<textarea rows="5" name="message" required="required" class="form-control" placeholder="Message *"></textarea>
</div>
<div class="input-group form-buttons">
<span class="input-group-btn">
<input type="submit" id="btn" name="buttn" value="Send Message" class="btn btn-default"/><i class="fa fa-envelope"></i>
</span>
</div>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
}
});
</script>
