ajax和jquery驗證插件均無法同時使用

Question

這是我的代碼，我想驗證所有用戶的文件，然后將數據插入數據庫，但是如果我同時輸入驗證代碼和ajax代碼，那么它將無法正常工作，但是兩個代碼都可以正常工作。 如果我注釋掉ajax代碼，則驗證代碼工作正常，反之亦然

 <script> //validation $(document).ready(function () { //toatsr success toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-top-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" } //toatr //error toster toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-top-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" } //error toaster // Setup form validation on the #register-form element $("#contactus_form").validate({ // Specify the validation rules rules: { name: "required", contact: "required", degree: "required", applying_for: "required", experience: "required", user_cv: "required", email: { required: true, email: true } }, // Specify the validation error messages messages: { name: "Please enter your first name", contact: "Please enter your contact number", degree: "Please enter your Qualification", experience: "Please enter your experience", user_cv: "Please select Your Cv", applying_for: "Please accept our policy", email: "Please enter a valid email address" }, submitHandler: function (form) { form.ajaxsubmit(); } // alert("alert"); }); $("#submit").click(function () { //alert("alert"); var name = $("#name").val(); var email = $("#email").val(); //var password = $("#password").val(); var contact = $("#contact").val(); var applying_for = $("#applying_for").val(); var degree = $("#degree").val(); var experience = $("#experience").val(); //var user_cv = $("#user_cv").val(); //form data var form_data = new FormData(); var file_data = $('#user_cv').prop('files')[0]; // here pic is the id of input type image form_data.append('user_cv', file_data); // form_data.append('name1', name); form_data.append('email1', email); form_data.append('contact', contact); form_data.append('degree', degree); form_data.append('applying_for', applying_for); form_data.append('experience', experience); //var password = $("#password").val(); // Returns successful data submission message when the entered information is stored in database. //var dataString = 'name1='+ name + '&email1='+ email + '&contact='+ contact+ '&degree='+ degree+ '&applying_for='+ applying_for+ '&user_cv='+ user_cv+ '&experience='+ experience; if (name == '' || email == '' || applying_for == '' || contact == '' || experience == '') { //alert("Please Fill All Fields"); toastr["warning"]("All Fields are required.") } else { // AJAX Code To Submit Form. $.ajax({ type: "POST", url: "ajaxsubmit.php", enctype: 'multipart/form-data', data: form_data, cache: false, contentType: false, processData: false, success: function (result) { $('#myModal').modal('hide'); toastr["success"]("Your submission has been sent successfully.", "Success") $("form").trigger("reset"); //alert(result); } }); } return false; }); }); </script> 

 <form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data"> <div class="form-group"> <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'"> </div> <div class="form-group"> <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'"> </div> <div class="form-group"> <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'"> </div> <div class="form-group"> <!-- <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'"> --> <select id="degree" name="degree" class="form-control"> <option value="Highest Degree ">Highest Degree </option> <option value="Highest Degree ">Highest Degree </option> </select> </div> <div class="form-group"> <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'"> </div> <div class="form-group"> <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'"> </div> <div class="form-group"> <div class="field"> <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" /> <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span> <strong class="browse-btn butn">Browse</strong></label> </div> </div> <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button> </form> 

Answer 1

使用validation和ajax()的最佳方法是：

$('#formId').validate({
    rules:{
        // rules here
    },
    messages:{
        // messages here
    }
});

持有表格和位

$('#formId').submit(function(e){
    e.preventDefault();
});

在單擊提交按鈕時啟動驗證檢查

$('#btn').click(function(){
    if( $('#formId').valid() )
    {
        // ajax call here
    }
});