在不加载login.php的情况下提交时如何使用jQuery检查文本字段是否为空？
<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>
谢谢。
【问题讨论】：
标签： jquery form-submit
您可以使用 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;
}
});
【讨论】：
您可以使用“必填”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>
【讨论】：
一个简单的解决方案是这样的
$( "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; }
});
注意：jQuery.on() 方法仅在 jQuery 1.7+ 版本中可用，但它现在是附加事件处理程序的首选方法。
此代码循环遍历表单中的所有输入，并通过在其中任何一个没有值时返回 false 来阻止表单提交。请注意，它不会向用户显示有关表单提交失败原因的任何消息（我强烈建议添加一个）。
或者，您可以查看jQuery validate 插件。它不仅可以做到这一点。
注意：此类技术应始终与服务器端验证结合使用。
【讨论】：
has_empty吗？
has_empty 初始化为false，然后遍历表单中的每个输入。如果任何输入为空，我们将has_empty 设置为true 并 打破循环（这就是return false 的意义所在）。然后我们简单检查has_empty的值，如果有空字段，有条件地返回false，防止表单提交。
您需要将处理程序添加到表单submit 事件。在处理程序中，您需要检查每个文本字段，如果值不为空，请选择元素和密码字段。
$('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.
});
【讨论】：
我真的很讨厌那些不告诉我缺少什么输入的表单。 所以我改进了多米尼克的答案 - 谢谢。
在 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
});
【讨论】：
您应该尝试使用 jquery validate 插件：
$('form').validate({
rules:{
email:{
required:true,
email:true
}
},
messages:{
email:{
required:"Email is required",
email:"Please type a valid email"
}
}
})
【讨论】：
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();
});
});
【讨论】：
var save_val = $("form").serializeArray();
$(save_val).each(function( index, element ) {
alert(element.name);
alert(element.val);
});
【讨论】：