提交前jQuery检查输入不为空答案

【问题标题】：jQuery check inputs not empty before submit提交前jQuery检查输入不为空
【发布时间】：2011-12-06 15:13:23
【问题描述】：

我一直在研究有关如何执行此操作的不同线程并将以下脚本放在一起，但是，即使我输入输入以使其不为空，我也会弹出警报和表单不提交。

谁能看到我做错了什么，或者是否有更简单/更有效的方法？

谢谢，

奥苏

HTML：

<form action="#" method="post" class="signup-form">
    <div class="required">
        <label for="name">Name:</label>
        <input type="text" name="cm-name" id="name" value=""><br />
    </div>
    <div class="required">
        <label for="asd-asd">Email:</label>
        <input type="text" name="cm-asd" id="asd-asd" value="">
        <span class="btn"><input type="submit" name="submit" value="" id="signup"></span>
    </div>          
</form>

JS：

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

【问题讨论】：

stackoverflow.com/questions/17865148/…的可能重复
类似问题：可以在html5中使用required属性。它将处理验证和所需的 css ..

标签： jquery validation form-submit

【解决方案1】：

感谢您的回答，但是，我发现收到错误消息的原因是提交按钮没有值，即 value=""，因此它也在检查该输入。为了纠正这个问题，我必须确保提交函数只检查“文本”输入类型：

新的 JS：

// Validate form fields in Sign up form 
$(".signup-form").submit(function(){
    var isFormValid = true;
    $(".signup-form .required input:text").each(function(){ // Note the :text
        if ($.trim($(this).val()).length == 0){
            $(this).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(this).parent().removeClass("highlight");
        }
    });
    if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
    return isFormValid;
});

【讨论】：

【解决方案2】：

 $('#signup').click(function(event) {

 event.preventDefault(); 
//validate and if it is valid serialize the form
//else alert and return


var isFormValid = true;
    $(".signup-form .required input").each(function(index, value){
        if ($.trim($(value).val()).length == 0){
            $(value).parent().addClass("highlight");
            isFormValid = false;
        } else {
            $(value).parent().removeClass("highlight");
        }
    });

if(isFormValid ){
   $.post( 'validation.php', $('.signup-formt').serialize(), function( data ) {

  });
}else{
  alert("Please fill in all the required fields (highlighted in red)");
}
 });

【讨论】：

【解决方案3】：

$('input').each(function(index, obj){
    if($(obj).val().length === 0) {
        $(obj).addClass('error');
    }
});

但我不记得是 obj 还是 this。

【讨论】：

【解决方案4】：

.each 多次运行脚本。例如，如果您有 3 个空输入，则您正在使用的脚本会添加 class .highlight 3 次。如果您想保持页面简洁明了，请执行下面的脚本。

check = function()
    {                
var empty = $(".signup-form .required input").filter(function() {
return this.value == ""; });//this checks if 1 or more inputs have no value
if(empty.length) {//to be applied if at least 1 input has no value
alert("Please fill in all the required fields (highlighted in red)");
$(".signup-form").addClass("highlight");
}else{
$(".signup-form").removeClass("highlight");
};}

如果至少有一个输入为空，这将提醒消息 ONCE。然后只需将 onclick 函数添加到您的提交输入或您想要验证表单的任何按钮。

<input type="submit" value="submit" onclick="check();">

【讨论】：