Làm cách nào tôi có thể nghe biểu mẫu gửi sự kiện trong javascript?

Tôi muốn viết thư viện javascript xác thực mẫu của riêng tôi và tôi đã tìm trên google cách phát hiện nếu nhấp vào nút gửi nhưng tất cả những gì tôi tìm thấy là mã nơi bạn phải sử dụng onClick trên onSubmit="function()"html.

Tôi muốn tạo javascript này để tôi không phải chạm vào bất kỳ mã html nào như thêm onSubmit hoặc onClick javascript.

Tại sao mọi người luôn sử dụng jQuery khi không cần thiết?
Tại sao mọi người không thể sử dụng JavaScript đơn giản?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback là một chức năng mà bạn muốn gọi khi biểu mẫu đang được gửi.

Giới thiệu EventTarget.addEventListener, hãy xem tài liệu này trên MDN .

Để hủy submitsự kiện gốc (ngăn không cho biểu mẫu được gửi), hãy sử dụng .preventDefault()chức năng gọi lại của bạn,

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

Lắng nghe submitsự kiện với các thư viện

Nếu vì một lý do nào đó mà bạn quyết định thư viện là cần thiết (bạn đã sử dụng một hoặc bạn không muốn giải quyết các vấn đề trên trình duyệt chéo), thì đây là danh sách các cách để nghe sự kiện gửi trong các thư viện phổ biến:

1. jQuery

   $(ele).submit(callback);

   eleTham chiếu phần tử biểu mẫu ở đâu và callbacklà tham chiếu hàm gọi lại. Tài liệu tham khảo

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };

   Rất đơn giản, đâu $scopelà phạm vi được cung cấp bởi khung bên trong bộ điều khiển của bạn . Tài liệu tham khảo

3. Phản ứng

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }

   Đơn giản chỉ cần vượt qua trong một xử lý để onSubmitchống đỡ. Tài liệu tham khảo

4. Các khung / thư viện khác

   Tham khảo tài liệu của khung của bạn.

Thẩm định

Bạn luôn có thể thực hiện xác thực bằng JavaScript, nhưng với HTML5, chúng tôi cũng có xác thực gốc.

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

Bạn thậm chí không cần bất kỳ JavaScript! Bất cứ khi nào xác thực bản địa không được hỗ trợ, bạn có thể dự phòng trình xác thực JavaScript.

Bản trình diễn: http://jsfiddle.net/DerekL/L23wmo1L/

Đây là cách đơn giản nhất bạn có thể gọi hàm javascript của riêng mình khi onSubmitxảy ra.

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

Dựa trên yêu cầu của bạn, bạn cũng có thể thực hiện các thao tác sau mà không cần các thư viện như jQuery:

Thêm cái này vào đầu bạn:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

Và hình thức của bạn vẫn có thể trông giống như:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

Với jQuery:

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});