Kích hoạt xác thực html5 theo cách thủ công trên nút bấm

Question

Tôi đang cố xử lý xác thực biểu mẫu khi nhấp vào nút. Nó đang xác thực biểu mẫu nhưng không hiển thị lỗi. ai cũng có thể giúp tôi trong việc này không?

<form id="the-form" action="#"> 
    <input type="text" required="required" placeholder="Required text" /> 
    <input type="email" required="required" placeholder="email" /> 
    <button id="btn" type="button">Submit</button> 
</form> 

javascript:

$("#btn").on("click", function(){ 
    if($("#the-form")[0].checkValidity()) 
    { 
     alert('validated'); 
    } 
    else 
    { 
     //show errors 
     return false; 
    } 
}); 

http://jsfiddle.net/5ycZz/

Answer 1

tôi đã đạt được điều này bằng cách thực hiện các bước dưới đây:

1) Tôi đang gặp dạng:

<form> 
    <textarea required></textarea> 
    <input type="submit" style="display:none;"/> 
</form> 

<a>Some other button to trigger event</a> 

2) Bây giờ chúng ta phải kiểm tra xem dạng là điền chính xác:

//this is <a> click event: 
if (!$('form')[0].checkValidity()) { 
    $('form').find('input[type="submit"]').click(); 
    return false; 
} 

Điều này sẽ kích hoạt gửi nhưng không gửi vì có lỗi;)

Dường như lỗi xác nhận html5 được hiển thị trên đầu vào [type = "submit"] nhấp :)

Hope sẽ làm việc cho bạn quá! :)

Answer 2

Tháo tuyên bố khác. (Cập nhật)

$("#btn").on("click", function(){ 
if($("#the-form")[0].checkValidity()) 
{ 
    alert('validated'); //will appear if name and email are of valid formats 
} 
}); 

Answer 3

đây là câu trả lời hoàn hảo

<form id="the-form" action="#"> 
<input type="text" required="required" placeholder="Required text" /> 
<input type="email" required="required" placeholder="email" /> 
<button id="btn" type="submit">Submit</button> 

$("#btn").on("click", function(){ 
if($("#the-form")[0].checkValidity()) 
{ 
    alert('validated'); 
} 
else 
{ 
    return 0; 
} 

});

Answer 4

Bạn có thể chỉ cần thêm onclick = "return validateForm()".

<button id="btn" onclick="return validateForm()" type="button">Submit</button> 

Answer 5

Hãy thử

reportValidity() 

Vì vậy, bạn sẽ phải

$("#btn").on("click", function(){ 
    if($("#the-form")[0].checkValidity()) { 
     alert('validated'); 
    } 
    else { 
     $("#the-form")[0].reportValidity(); 
    } 
});