Cách kiểm tra xem xác thực biểu mẫu html5 có hoàn thành không

Question

Tôi có biểu mẫu đang sử dụng html5 để xác thực cho email và các trường bắt buộc. Biểu mẫu sẽ được gửi qua ajax. Làm cách nào để tôi xác định rằng biểu mẫu đã vượt qua xác thực trước khi tôi cho phép gửi biểu mẫu qua ajax.

Đây là html của tôi:

<form action="" method="post" id="comment_form"> 
    <input type="hidden" name="post_id" value="<?=$post->ID ?>" /> 
    <label for="name">Name</label> 
    <input type="text" name="name" required="required"> 

    <label for="email">Email Address</label> 
    <input type="email" name="email" required="required"> 


    <label for="comment">Comment</label> 
    <textarea name="comment" required="required" > 
    </textarea> 


    <label for="submit"></label> 
    <button type="submit"class="button green meduim" id="comment_btn">Submit</button> 
</form> 

Đây là jquery tôi

$("#comment_btn").click(function(e){ 
    //the request url 
    var url = site_url+'comments/post_comment'; 
    //cross site request forgery token 
    var xtoken = $("input[name='xtoken']").val(); 
    //post data 
    var dataObj = { 
    "name":$('#name').val(), 
    "email":$("#email").val(), 
    "comment":$("#comment").val(), 
    "post_id":$("input[name='post_id']").val(), 
    "xtoken":xtoken 
    }; 
    //dim form 
    $('#comment_form').addClass('dim'); 
    //make request 
    $.ajax({ 
    url:url, 
    type:'POST', 
    data:dataObj, 
    dataType:'json', 
    error:function() {}, 
    success:function(resp) { 
     if(resp.status == "ok") 
     { 
     $('#comment_form').removeClass('dim'); 
     }else { 
     alert("An error was encountered"); 
     } 
    } 
    }); 
    e.preventDefault(); 
}); 

Có cách nào để xác định xem hình thức được xác nhận?

Answer 1

Bạn có thể sử dụng hàm form() của trình xác thực, ví dụ:

var validator = $("#comment_form").validate(options); 
if (validator.form()) { 
    // submit with AJAX 
} 

Answer 2

Có lẽ tốt nhất là không phải dựa trên trình duyệt để xác nhận dữ liệu của bạn, chắc chắn sử dụng required và pattern được mát mẻ và tất cả nhưng tôi sẽ không phụ thuộc vào nó.

Viết xác thực của riêng bạn vào javascript trước khi dữ liệu được gửi tới URL của bạn. Bạn có thể làm điều này với một chút Regex hoặc bạn có thể sử dụng nhiều plugin xác thực jQuery có sẵn ở đó chẳng hạn như h5validate hoặc Validation.

Answer 3

Đừng liên kết với sự kiện click của nút gửi đơn giản là liên kết với trường hợp nộp của mẫu của bạn:

$('#comment_form').submit(function(e){ 
    e.preventDefault(); 
    //submit via ajax 
}); 

Answer 4

Bạn có thể đăng ký để mẫu 'onsubmit' sự kiện đó sẽ bị sa thải nếu hình thức có đã thông qua xác thực thành công và đang được gửi.

document.getElementById("comment_form").onsubmit = myPassedValidationHandler;