Cách liên kết với sự kiện gửi khi xác thực HTML5 được sử dụng?

Sử dụng xác nhận HTML5 ...Cách liên kết với sự kiện gửi khi xác thực HTML5 được sử dụng?

Trong trình duyệt HTML5, xác nhận xảy ra trước sự kiện submit. Vì vậy, nếu biểu mẫu không hợp lệ, sự kiện gửi sẽ không bao giờ xảy ra.

Tôi muốn treo một sự kiện vào biểu mẫu gửi, để kích hoạt xem biểu mẫu có hợp lệ hay không. Dưới đây là một ví dụ nhỏ, nơi tôi đang cố gắng để alert() khi người dùng gửi biểu mẫu.

HTML:

<!DOCTYPE html> 
<html> 
    <head><title>Example</title></head> 
    <body> 
     <form> 
      <input type="text" name="foo" required title="Foo field"/> 
      <input type="submit"/> 
     </form> 
    </body> 
</html>

JavaScript:

$(function() { 
    $('form').submit(function() { 
     alert('submit!') 
    }); 
});

Interactive demo: http://jsfiddle.net/gCBbR/

Câu hỏi của tôi là: làm trình duyệt cung cấp một sự kiện thay thế mà tôi có thể liên kết với đó sẽ chạy trước xác nhận?

Nguồn

2011-09-28 Portman

Vâng, có một sự kiện vì lý do đó. Sự kiện này được gọi là invalid khi người dùng cố gắng gửi for orr khi bạn kiểm tra tính hợp lệ qua phương thức xác thực HTML5 checkValidity(). Sự kiện này không kích hoạt trên blur hoặc một cái gì đó tương tự mà không cần gọi checkValidity() chỉ vì bạn có thuộc tính xác thực HTML trong các thẻ input của mình. Nhưng nó sẽ kích hoạt trước khi gửi biểu mẫu.

Từ W3C:

Khi) phương pháp checkValidity( được gọi, nếu phần tử là một ứng cử viên để xác nhận hạn chế và không đáp ứng hạn chế của nó, là đại lý sử dụng phải bắn một sự kiện đơn giản đặt tên invalid có thể hủy (nhưng trong trường hợp này không có hành động mặc định) tại phần tử và trả về false. Nếu không, nó chỉ phải trả về true mà không cần làm bất cứ điều gì khác.

Ví dụ, bạn có dấu sau:

<form> 
      <input type="text" name="foo" required title="Foo field"/> 
      <input type="submit"/> 
</form>

Sau đó, bạn cần phải gọi checkValidity() bắn invalid kiện nếu các dữ liệu input không hợp lệ:

document.querySelectorAll('input')[0].addEventListener('blur', function(){ 
     this.checkValidity(); 
    }, false); 

document.querySelectorAll('input')[0].addEventListener('invalid', function(){ 
     console.log('invalid fired'); 
    }, false);

Nhìn vào ví dụ của tôi ở đây: http://jsbin.com/eluwir/2

Nguồn

2011-09-28 18:29:12 Mohsen

Thực ra điều này không hoàn toàn đúng.Sự kiện không hợp lệ được kích hoạt với xác nhận ràng buộc có lập trình (checkValidity) * và * xác thực biểu mẫu tương tác (các trys người dùng để gửi biểu mẫu có các đầu vào không hợp lệ). Ngoài ra còn có 2 khác biệt lớn khác, giá trị không hợp lệ được kích hoạt cho mỗi đầu vào không hợp lệ và chỉ gửi một lần + sự kiện không hợp lệ không bong bóng vào biểu mẫu (bạn có thể sử dụng capture ...). –

@alexanderfarkas, bạn hoàn toàn đúng. Tôi hiểu lầm các đặc điểm kỹ thuật. Đã chỉnh sửa câu trả lời của tôi. Sự kiện này kích hoạt trước khi gửi tại đây: http://jsbin.com/eluwir/3/edit – Mohsen

-1

$(function() { 
    $('form').one('submit',function() { 
     alert(1); 

     [...] 

     $(this).submit(); // optional 
     return false; // returning false skips validator's trigger 
    }); 
});

mã này sẽ được thực hiện chỉ một lần, xử lý thường xuyên sử dụng $.bind

Nguồn

2011-09-28 18:15:48 bazilio

Tôi nghĩ rằng bạn hiểu sai câu hỏi. Sự kiện gửi không bao giờ được kích hoạt nếu biểu mẫu không xác thực HTML5. – Portman

-2

nếu bạn muốn sử dụng va chạm mặc định của trình duyệt lidation bạn nên sử dụng sau đây khi bạn cần phải ràng buộc với mặc định gửi sau đó ngăn chặn nó và sử dụng $ .ajax hoặc $ .post

$("form").bind('submit', function(e){ 
     e.preventDefault(); 

     $.post("url",$("form").serialize(),function(data){ 
          $("#result").html(data).show(); 
           }); 
     });

Nguồn

2012-10-30 08:47:59 Bakly

Cách liên kết với sự kiện gửi khi xác thực HTML5 được sử dụng?

Trả lời

Các vấn đề liên quan