提交前jQuery检查输入不为空

Question

我一直在寻找关于如何做到这一点的不同线程,并将下面的脚本放在一起,但是,即使我输入输入所以它们不是空的,我也会弹出警报并且表单不会提交.

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

谢谢,

奥苏

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;
});

Answer 1

但是,感谢您的回答,我发现我收到错误消息的原因是因为提交按钮没有值,即值="",所以它也检查了输入.为了纠正这个问题,我必须确保提交函数只检查'text'输入类型:

新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;
});