jQuery 如何使用jQuery检查表单提交时文本字段是否为空？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16556968/
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
How to check if text fields are empty on form submit using jQuery?
提问by conmen
How could I use jQuery to check if text-fields are empty when submitting without loading login.php?
提交时如何使用 jQuery 检查文本字段是否为空而不加载login.php？
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<input type="submit" name="submit" value="Login" />
</form>
Thanks.
谢谢。
回答by pala?н
You can bind an event handler to the "submit" JavaScript event using jQuery .submitmethod and then get trimmed #logtext field value and check if empty of not like:
您可以使用 jQuery.submit方法将事件处理程序绑定到“提交”JavaScript 事件，然后获取修剪后的#log文本字段值并检查是否为空或不喜欢：
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty.');
return false;
}
});
回答by NEO
You can use 'required' http://jsbin.com/atefuq/1/edit
您可以使用“必需” http://jsbin.com/atefuq/1/edit
<form action="login.php" method="post">
<label>Login Name:</label>
<input required type="text" name="email" id="log" />
<label>Password:</label>
<input required type="password" name="password" id="pwd" />
<input required type="submit" name="submit" value="Login" />
</form>
回答by Dominic P
A simple solution would be something like this
一个简单的解决方案是这样的
$( "form" ).on( "submit", function() {
var has_empty = false;
$(this).find( 'input[type!="hidden"]' ).each(function () {
if ( ! $(this).val() ) { has_empty = true; return false; }
});
if ( has_empty ) { return false; }
});
Note: The jQuery.on()method is only available in jQuery version 1.7+, but it is now the preferred method of attaching event handlers.
注意：该jQuery.on()方法仅在 jQuery 1.7+ 版本中可用，但它现在是附加事件处理程序的首选方法。
This code loops through all of the inputs in the form and prevents form submission by returning false if any of them have no value. Note that it doesn't display any kind of message to the user about why the form failed to submit (I would strongly recommend adding one).
此代码循环遍历表单中的所有输入，并通过在其中任何一个没有值时返回 false 来防止表单提交。请注意，它不会向用户显示有关表单提交失败原因的任何类型的消息（我强烈建议添加一个）。
Or, you could look at the jQuery validateplugin. It does this and a lot more.
或者，您可以查看jQuery 验证插件。它可以做到这一点以及更多。
NB: This type of technique should always be used in conjunction with server side validation.
注意：此类技术应始终与服务器端验证结合使用。
回答by vdua
you need to add a handler to the form submitevent. In the handler you need to check for each text field, select element and password fields if there values are non empty.
您需要向表单提交事件添加处理程序。在处理程序中，您需要检查每个文本字段，如果值不为空，则选择元素和密码字段。
$('form').submit(function() {
var res = true;
// here I am checking for textFields, password fields, and any
// drop down you may have in the form
$("input[type='text'],select,input[type='password']",this).each(function() {
if($(this).val().trim() == "") {
res = false;
}
})
return res; // returning false will prevent the form from submitting.
});
回答by Mareg
I really hate forms which don't tell me what input(s) is/are missing. So I improve the Dominic's answer - thanks for this.
我真的很讨厌那些没有告诉我缺少什么输入的表单。所以我改进了多米尼克的答案 - 谢谢你。
In the css file set the "borderR" class to border has red color.
在 css 文件中，将“borderR”类设置为边框为红色。
$('#<form_id>').submit(function () {
var allIsOk = true;
// Check if empty of not
$(this).find( 'input[type!="hidden"]' ).each(function () {
if ( ! $(this).val() ) {
$(this).addClass('borderR').focus();
allIsOk = false;
}
});
return allIsOk
});
回答by Hamzeh Salhi
function isEmpty(val) {
if(val.length ==0 || val.length ==null){
return 'emptyForm';
}else{
return 'not emptyForm';
}
}
}
$(document).ready(function(){enter code here
$( "form" ).submit(function( event ) {
$('input').each(function(){
var getInputVal = $(this).val();
if(isEmpty(getInputVal) =='emptyForm'){
alert(isEmpty(getInputVal));
}else{
alert(isEmpty(getInputVal));
}
});
event.preventDefault();
});
});
回答by JamesN
you should try with jquery validate plugin :
您应该尝试使用 jquery 验证插件：
$('form').validate({
rules:{
email:{
required:true,
email:true
}
},
messages:{
email:{
required:"Email is required",
email:"Please type a valid email"
}
}
})
回答by sandeep kumar
var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
alert(element.name);
alert(element.val);
});
