如何在驗證所有字段后提交表單

Question

我正在嘗試使用 jquery 來驗證我的表單，表單驗證正常，但即使我正確輸入了所有字段后仍未提交表單，我該怎么做？ 我哪里錯了？ 這是我的 jquery 代碼

 <script>  
    $(document).ready (function () {
        $('#first_form').submit (function (e) { 
                 
            e.preventDefault();  
             var first_name = $('#first_name').val(); 
             var email = $('#email').val();     
             var pwd = $('#pwd').val(); 
             
             var mobile = $('#mobile').val();
            
             var city = $('#city').val();
            var state = $('#state').val();
             var country = $('#country').val();
             
              $(".error").remove();  
            if (first_name.length < 1) {  
              $("#usernamemsg").append('<span class="error" style="color:red;">This field is required</span>'); 
            }
            
            if (email.length < 1) {  
              $("#emailmsg").append('<span class="error" style="color:red;">This field is required</span>');    
            }
            if (pwd.length < 1) {  
              $("#pwdmsg").append('<span class="error" style="color:red;">Password must be at least 6 characters long</span>'); 
            }
            $("#first_form").validate({ 
            submitHandler: function(form) {  
                           if ($(form).valid()) 
                               form.submit(); 
                           return false; // prevent normal form posting
                    }
 });
        
    });  
 });
</script>

這是我的表格，輸入所有字段后如何提交表格？

            <form action="" method="post" id="first_form">
            <div class="form-field col-md-6">
             <span id="msg"></span>
                <label for="username"><b>Username</b></label>
                <input type="text" placeholder="Username" name="username" id="first_name"  >
            </div>

            <div class="form-field col-md-6">
                <label for="email"><b>Email</b></label>
                <input type="text" placeholder="Enter Email" name="email" id="email" required>
            </div>

            <div class="form-field col-md-6">
                <label for="password"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="password" id="password" required>
            </div>

            <div class="clearfix btns-form-main">
                <button type="submit" class="signupbtn" name="submit" id="signup">Sign Up</button>
                <button type="button" class="cancelbtn">Cancel</button>
            </div>
        </div>
</div>
</div>
    </form>

Answer 1

通過addClass和:not()選擇器你可以做到這一點

 $(document).on("submit", '#first_form:not(.validated)', function (e) { e.preventDefault(); let $this = $(this); // do your validation here console.log("validating"); console.log("After Validation Complete.. add the class and submit.."); // If form is valid setTimeout(function(){ // for testing purposes << remove it $this.addClass("validated").submit(); }, 2000); // <<< remove it });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="first_form"> <input type="submit" value="Submit"/> </form>

Answer 2

您不需要提交 function 中的驗證 function，並且由於您使用的是jQuery 驗證，您可以在驗證 function 中指定規則和消息，嘗試以下代碼：

$(document).ready(function () {
    $("#first_form").validate({
        errorPlacement: function errorPlacement(error, element) {
            element.after(error);
        },
        rules: {
            email: {
                required: true,
                email: true,
            },
            pwd: {
                required: true,
                minlength: 8,
                maxlength: 20,
            },
        },
        submitHandler: function (form) {
            if ($(form).valid())
                form.submit();
            return false; // prevent normal form posting
        }
    });
});

更新：還將required的class添加到要添加驗證的字段中。