xác thực biểu mẫu html5, hành động biểu mẫu trống và thực thi jQuery khi tất cả các phần tử biểu mẫu html5 được xác thực?

Question

Tôi có biểu mẫu HTML5 đơn giản mà tôi muốn tận dụng để xác thực trường bắt buộc. Vấn đề của tôi là tôi muốn sử dụng xác thực biểu mẫu HTML5 NHƯNG đồng thời tránh thực sự gửi biểu mẫu vì tôi muốn thực hiện cuộc gọi jQuery ajax thay thế. Tôi biết bạn có thể vô hiệu hóa xác thực html5, nhưng tôi muốn giữ điều này như là phương pháp chính của tôi về xác nhận biểu mẫu thay vì một plugin jQuery.

Mọi suy nghĩ?

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8"> 
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required> 
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required> 
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>  
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>  
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required> 
    <p> 
     <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px"> 
    </p> 
</form> 

JAVASCRIPT:

$(function(){ 
    $("#submitbtn").click(function(){ 
    $.ajax({ 
     url: "<?php bloginfo('template_url') ?>/ajax-membership.php", 
     success: 
     function(txt){ 
     if(txt){ 
      $("#thankyou").slideDown("slow"); 
     } 
     } 
    }); 
    }); 
}); 

Answer 1

Theo này: Do any browsers yet support HTML5's checkValidity() method?, và điều này có thể không phải là sự thật mới nhất từ ​​HTML5 là một công việc trong tiến trình, các Form.checkValidity() và element.validity.valid sẽ cho phép bạn truy cập thông tin xác thực từ JavaScript. Giả sử đó là sự thật, jQuery bạn sẽ cần phải đính kèm bản thân mẫu nộp và sử dụng rằng:

$('#membershipform').submit(function(event){ 
    // cancels the form submission 
    event.preventDefault(); 

    // do whatever you want here 
}); 

Answer 2

Sử dụng:

$('#membershipform').submit(function(){ 
    // do whatever you want here 

    return false; 
}); 

Answer 3

Sử dụng tinh khiết java script

<script> 

document.getElementById('membershipform').addEventListener("submit", function(e) 
{ 
     event.preventDefault(); 
     //write stuff 
}); 

    </script> 

Answer 4

Đây là một đòn bẩy tinh tế của hành vi mặc định và javascript để tạo ra những gì bạn muốn.

var form = document.getElementById("purchaseForm"); 
if(form.checkValidity()){ 
    console.log("valid"); 
    e.preventDefault(); 
}else{ 
    console.log("not valid"); 
    return; 
} 

Nếu biểu mẫu hợp lệ, hãy ngăn chặnDefault() và tiếp tục với chức năng của bạn (ví dụ: gửi qua ajax). Nếu không hợp lệ, sau đó quay trở lại mà không ngăn chặn mặc định, bạn nên tìm các hành động mặc định để xác thực biểu mẫu xảy ra trên đầu vào biểu mẫu của bạn.