Xác thực HTML5 trước khi gửi ajax

Question

Điều này phải đơn giản, nhưng điều đó khiến tôi phát điên. Tôi có một mẫu html5 mà tôi đang gửi với ajax. Nếu bạn nhập một giá trị không hợp lệ, có một phản hồi popup cho bạn biết như vậy. Làm cách nào tôi có thể kiểm tra xem các mục nhập có hợp lệ trước khi tôi gửi yêu cầu ajax của mình không?

dạng:

<form id="contactForm" onsubmit="return false;"> 
    <label for="name">Name:</label> 
    <input type="text" name="name" id="name" required placeholder="Name" /> 
    <label for="subject">Subject:</label> 
    <input type="text" name="subject" id="subject" required placeholder="Subject" /> 
    <label for="email">Email:</label> 
    <input type="email" name="email" id="email" required placeholder="email@example.com" /> 
    <label for="message">Message:</label> 
    <textarea name="message" id="message" required></textarea> 
    <input type="submit" id="submit"/> 
</form> 

nộp:

$('#submit').click(function(){ 
    var name = $("input#name").val(); 
    var subject = $("input#subject").val(); 
    var email = $("input#email").val(); 
    var message = $("input#message").val(); 

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({ 
     url: "scripts/mail.php", 
     type: 'POST', 
     data: dataString, 
     success: function(msg){ 
      disablePopupContact(); 
      $("#popupMessageSent").css("visibility", "visible"); 
     }, 
     error: function() { 
      alert("Bad submit"); 
     } 
    }); 
}); 

Answer 1

Theo mặc định, jQuery không biết gì về việc phê chuẩn HTML5, vì vậy bạn sẽ phải làm một cái gì đó như:

$('#submit').click(function(){ 
    if($("form")[0].checkValidity()) { 
     //your form execution code 
    }else console.log("invalid form"); 
}); 

Answer 2

Không chắc chắn ý bạn là gì. Nhưng tôi cho rằng bạn muốn kiểm tra trong thời gian thực nếu đầu vào là hợp lệ. Nếu vậy bạn nên sử dụng .keyup thay vì sự kiện .click, vì điều này sẽ dẫn đến một hành động nếu người dùng nhấn gửi. Hãy xem http://api.jquery.com/keyup/

Với điều này, bạn có thể kiểm tra đầu vào bằng mỗi lần chèn và hiển thị ký tự mới, ví dụ: "không hợp lệ" cho đến khi xác thực của bạn đúng.

Tôi hy vọng điều này sẽ trả lời câu hỏi của bạn!

Answer 3

Nếu bạn đang sử dụng xác thực biểu mẫu HTML5, bạn sẽ phải gửi yêu cầu ajax trong trình xử lý gửi của biểu mẫu. Trình xử lý gửi sẽ chỉ kích hoạt nếu biểu mẫu xác thực. Những gì bạn đang sử dụng là trình xử lý nhấn nút sẽ luôn kích hoạt vì nó không có liên kết với xác thực biểu mẫu. LƯU Ý: không phải tất cả các trình duyệt đều hỗ trợ xác thực biểu mẫu html5.

Answer 4

U cũng có thể sử dụng phương thức xác thực jquery để xác thực biểu mẫu như

$ ("# id mẫu"). Validate();

trả về giá trị boolean dựa trên xác thực biểu mẫu & cũng bạn có thể thấy lỗi trong nhật ký sử dụng phương pháp errorList.

để sử dụng trên chức năng u phải bao gồm tập tin jquery.validate.js trong kịch bản của bạn

Answer 5

Nếu bạn liên kết với trường hợp nộp thay vì nhấp vào nó sẽ chỉ cháy nếu nó vượt qua xác nhận HTML5. Tốt nhất là nên thực hiện bộ nhớ cache bộ chọn jQuery của bạn trong các biến nếu bạn sử dụng nó nhiều lần, do đó bạn không cần phải điều hướng DOM mỗi khi bạn truy cập một phần tử. jQuery cũng cung cấp một hàm .serialize() sẽ xử lý việc phân tích dữ liệu biểu mẫu cho bạn.

var $contactForm = $('#contactForm'); 

$contactForm.on('submit', function(ev){ 
    ev.preventDefault(); 

    $.ajax({ 
     url: "scripts/mail.php", 
     type: 'POST', 
     data: $contactForm.serialize(), 
     success: function(msg){ 
      disablePopupContact(); 
      $("#popupMessageSent").css("visibility", "visible"); 
     }, 
     error: function() { 
      alert("Bad submit"); 
     } 
    }); 
}); 

Answer 6

Tôi thích sử dụng trình xử lý gửi jQuery hơn, bạn sẽ vẫn nhận được phản hồi cho biểu mẫu của mình bằng phương pháp sau.

jQuery('#contactForm').on('submit', function (e) { 
    if (document.getElementById("contactForm").checkValidity()) { 
     e.preventDefault(); 
     jQuery.ajax({ 
      url: '/some/url', 
      method: 'POST', 
      data: jQuery('#contactForm').serialize(), 
      success: function (response) { 
       //do stuff with response 
      } 
     }) 
    } 
    return true; 
});