html5 yêu cầu và jquery gửi()

Question

Tôi đang cố gắng triển khai html5 thành biểu mẫu, nhưng tôi đã gặp sự cố khi tôi gửi biểu mẫu qua jquery và thử sử dụng thuộc tính html5 "required".

Dưới đây là hình thức của tôi, khá đơn giản:

<form action="index.php" id="loginform"> 
     <input name="username" required placeholder="username" type="text">  
     <a href="javascript:$('#loginform').submit();">Login</a> 
</form> 

Vấn đề là khi biểu mẫu được đệ trình thông qua jquery, Nó chỉ bằng-đi thuộc tính cần thiết. Tôi biết rằng yêu cầu chỉ nên hoạt động nếu biểu mẫu được gửi bởi người dùng, không phải bởi tập lệnh, vì vậy khi tôi thay đổi neo thành đầu vào gửi, nó hoạt động hoàn hảo.

Điểm của tôi là nếu có cách nào đó để buộc jquery .submit() sử dụng html5 bắt buộc phải phân phối.

Cảm ơn trước cho câu trả lời

Answer 1

tôi đã làm

sau

<form> 
    ... 
    <button type="submit" class="hide"></button> 
</form> 

<script> 
    ... 
    $(...).find('[type="submit"]').trigger('click'); 
    ... 
</script> 

¡nó hoạt động!

Answer 2

Bạn có thể gọi một hàm để thay thế và sử dụng chức năng để kiểm tra xem tất cả các nút với các thuộc tính cần có một giá trị.

Có một số plugin có sẵn để làm điều này: http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

Answer 3

bản demo Làm việchttp://jsfiddle.net/3gFmC/

Hy vọng điều này sẽ giúp :)

đang

$('#btn_submit').bind('click', function() { 

     $('input:text[required]').parent().show(); 
     // do whatever; 
}); 

Answer 4

Bạn nói đúng. Xác thực HTML5 chỉ hoạt động khi gửi được kích hoạt bởi người dùng. đây là nó như thế nào. :(

bạn cần viết một phương pháp riêng của bạn về nộp. HOẶC có một plugin tốt bạn có thể sử dụng mà xác nhận các lĩnh vực theo thuộc tính html5.

Answer 5

Bạn có thể

• kích hoạt sự kiện click trên một lần gửi
• kiểm tra xác thực theo cách thủ công với $("form")[0].checkValidity()
• tìm yếu tố không hợp lệ bằng tay sử dụng $("form :invalid")

Answer 6

Dưới đây là một số ví dụ, làm thế nào để xác nhận html5:

function validateForm(form) { 
    if (form.username.value=='') { 
    alert('Username missing'); 
    return false; 
    } 
    return true; 
} 

<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();"> 
    <input name="username" placeholder="username" required="required" type="text" /> 
    <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a> 
    <a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a> 
    <input name="send" type="submit" value="Login3" /> 
    <input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" /> 
</form> 

Full đang here. Một điều ở đây là lạ: $ (document.forms.loginform) .submit(); hoạt động tốt, nhưng document.forms.loginform.submit(); không thành công. Ai đó có thể giải thích tại sao?

Answer 7

Tôi đã gặp sự cố tương tự. Tôi đã có một nút duy nhất mà tôi đã cố tình đặt KHÔNG phải là một đệ trình bởi vì nó đã được nhấp chuột đầu tiên tiết lộ một biểu mẫu. Trên một lần nhấp thứ hai của cùng một nút $ ('form [name = xxx]'). Submit(); đã được kích hoạt và tôi cũng nhận thấy rằng xác thực HTML5 không hoạt động.

Bí quyết của tôi là thêm một dòng mã để sau khi lần nhấp đầu tiên của nút này xảy ra, tôi thay đổi loại của nó để gửi động.

$("#btn").attr("type","submit"); 

Làm việc như một sự quyến rũ!