jQuery Form Validation trước Ajax nộp

Question

chút JavaScript:

$(document).ready(function() 
    { 
      $('#form').submit(function(e) 
      {  

       e.preventDefault(); 
       var $form = $(this); 

       // check if the input is valid 
       if(! $form.valid()) return false; 
        $.ajax(
        { 
        type:'POST', 
        url:'add.php', 
        data:$('#form').serialize(), 
        success:function(response) 
        { 
         $("#answers").html(response); 
        } 
       });  

      }) 
    }); 

HTML bit:

<input type="text" name="answer[1]" class="required" /> 
    <input type="text" name="answer[2]" class="required" /> 

Vì vậy, đây là mã Tôi cố gắng để sử dụng. Ý tưởng là để có được tất cả các đầu vào của tôi xác nhận trước khi tôi gửi biểu mẫu của tôi với Ajax. Tôi đã thử nhiều phiên bản của điều này ngay bây giờ nhưng mỗi lần tôi kết thúc bằng việc gửi ngay cả khi biểu mẫu không được điền đầy đủ. Tất cả các yếu tố đầu vào của tôi là của lớp "bắt buộc". Ai có thể nhìn thấy những gì tôi đang làm sai?

Ngoài ra, tôi phụ thuộc vào các yêu cầu dựa trên lớp vì tên đầu vào của tôi được tạo bằng php nên tôi không bao giờ có thể chắc chắn tên [id] hoặc kiểu nhập nào tôi nhận được.

Tôi hiển thị/ẩn các câu hỏi khi tôi xem xét nó trong "trang".

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/> 

JS:

function toggleVisibility(newSection) 
     { 
      $(".section").not("#" + newSection).hide(); 
      $("#" + newSection).show(); 
     } 

Answer 1

Bạn có thể sử dụng tùy chọn submitHandler. Về cơ bản, hãy đặt lệnh gọi $.ajax bên trong trình xử lý này, tức là đảo ngược cuộc gọi đó bằng logic thiết lập xác thực.

$('#form').validate({ 

    ... your validation rules come here, 

    submitHandler: function(form) { 
     $.ajax({ 
      url: form.action, 
      type: form.method, 
      data: $(form).serialize(), 
      success: function(response) { 
       $('#answers').html(response); 
      }    
     }); 
    } 
}); 

Plugin jQuery.validate sẽ gọi handler nộp nếu xác nhận đã qua.

Answer 2

Bạn có thể thử thực hiện:

if($("#form").validate()) { 
return true; 
} else { 
return false; 
} 

Answer 3

Tôi nghĩ rằng tôi lần đầu tiên xác nhận hình thức và nếu xác nhận sẽ vượt qua, hơn tôi sẽ làm cho bài ajax. Đừng quên thêm "return false" vào cuối tập lệnh.

Answer 4

trước tiên bạn không cần phải thêm classRules một cách rõ ràng vì required được tự động phát hiện bởi plugin jquery.validate. để bạn có thể sử dụng mã này:

1. vào mẫu gửi, bạn ngăn chặn các hành vi mặc định
2. nếu hình thức là dừng không hợp lệ thực hiện.

3. khác nếu hợp lệ gửi yêu cầu ajax.

   $('#form').submit( function(e){  
   
         e.preventDefault(); 
         var $form = $(this); 
   
         // check if the input is valid 
         if(! $form.valid()) return false; 
   
         $.ajax({ 
          type: 'POST', 
          url: 'add.php', 
          data: $('#form').serialize(), 
          success: function(response) { 
           $("#answers").html(response); 
          } 
   
         }); 
        }); 
   

Answer 5

ví dụ cụ thể này sẽ chỉ kiểm tra đầu vào nhưng bạn có thể tinh chỉnh nó tuy nhiên, Thêm một cái gì đó như thế này để chức năng .ajax của bạn:

beforeSend: function() {      
    $empty = $('form#yourForm').find("input").filter(function() { 
     return this.value === ""; 
    }); 
    if($empty.length) { 
     alert('You must fill out all fields in order to submit a change'); 
     return false; 
    }else{ 
     return true; 
    }; 
}, 

Answer 6

Tôi nghĩ submitHandler với validation jquery là tốt dung dịch. Hãy lấy ý tưởng từ mã này.Lấy cảm hứng từ @Darin Dimitrov

$('.calculate').validate({ 

       submitHandler: function(form) { 
        $.ajax({ 
         url: 'response.php', 
         type: 'POST', 
         data: $(form).serialize(), 
         success: function(response) { 
          $('#'+form.id+' .ht-response-data').html(response); 
         }    
        }); 
       } 
      }); 

Answer 7

> Required JS for jquery form validation 
> ## jquery-1.7.1.min.js ## 
> ## jquery.validate.min.js ## 
> ## jquery.form.js ## 

$("form#data").validate({ 
    rules: { 
     first: { 
       required: true, 
      }, 
     middle: { 
      required: true, 
     },   
     image: { 
      required: true, 
     }, 
    }, 
    messages: { 
     first: { 
       required: "Please enter first", 
      }, 
     middle: { 
      required: "Please enter middle", 
     },   
     image: { 
      required: "Please Select logo", 
     }, 
    }, 
    submitHandler: function(form) { 
     var formData = new FormData($("#image")[0]); 
     $(form).ajaxSubmit({ 
      url:"action.php", 
      type:"post", 
      success: function(data,status){ 
       alert(data); 
      } 
     }); 
    } 
}); 

Answer 8

Mẫu có nguồn gốc Javascript checkValidity chức năng là nhiều hơn thì đủ để kích hoạt các HTML5 xác nhận

$(document).ready(function() { 
    $('#urlSubmit').click(function() { 
     if($('#urlForm')[0].checkValidity()) { 
      alert("form submitting"); 
     } 
    }); 
});