Bagaimana saya bisa mendengarkan acara ajukan formulir dalam javascript?

Saya ingin menulis pustaka javascript validasi formulir saya sendiri dan saya telah mencari di google cara mendeteksi jika tombol kirim diklik tetapi yang saya temukan hanyalah kode tempat Anda harus menggunakan onClick on onSubmit="function()"in html.

Saya ingin membuat javascript ini sehingga saya tidak harus menyentuh kode html seperti menambahkan onSubmit atau onClick javascript.

Mengapa orang selalu menggunakan jQuery ketika itu tidak perlu?
Mengapa orang tidak bisa menggunakan JavaScript sederhana?

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 adalah fungsi yang ingin Anda panggil saat formulir dikirimkan.

Tentang EventTarget.addEventListener , lihat dokumentasi ini di MDN .

Untuk membatalkan submitacara asli (agar formulir tidak dikirimkan), gunakan.preventDefault() dalam fungsi panggilan balik Anda,

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

Mendengarkan submitacara dengan perpustakaan

Jika karena alasan tertentu Anda telah memutuskan bahwa suatu perpustakaan diperlukan (Anda sudah menggunakannya atau Anda tidak ingin berurusan dengan masalah lintas-peramban), berikut adalah daftar cara untuk mendengarkan ajukan acara di perpustakaan umum:

1. jQuery

   $(ele).submit(callback);

   Di mana elereferensi elemen formulir, dan callbackmenjadi referensi fungsi panggilan balik. Referensi

    <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(){ /*...*/ };

   Sangat mudah, di mana $scoperuang lingkup yang disediakan oleh kerangka kerja di dalam controller Anda . Referensi

3. Reaksi

   <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
   }

   Cukup berikan pawang ke onSubmitpenyangga. Referensi

4. Kerangka kerja / perpustakaan lainnya

   Rujuk ke dokumentasi kerangka kerja Anda.

Validasi

Anda selalu dapat melakukan validasi dalam JavaScript, tetapi dengan HTML5 kami juga memiliki validasi asli.

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

Anda bahkan tidak memerlukan JavaScript apa pun! Setiap kali validasi asli tidak didukung, Anda dapat mundur ke validator JavaScript.

Demo: http://jsfiddle.net/DerekL/L23wmo1L/

Ini adalah cara paling sederhana Anda dapat memiliki fungsi javascript Anda sendiri dipanggil ketika suatu onSubmitterjadi.

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();
}

Berdasarkan kebutuhan Anda, Anda juga dapat melakukan hal berikut tanpa perpustakaan seperti jQuery:

Tambahkan ini ke kepala Anda:

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;
        }
    }
}

Dan formulir Anda mungkin masih terlihat seperti:

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

Dengan jQuery:

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

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