¿Cómo puedo escuchar el evento de envío de formulario en javascript?

Quiero escribir mi propia biblioteca de JavaScript de validación de formularios y he estado buscando en Google cómo detectar si se hace clic en un botón de envío, pero todo lo que encontré es un código donde tienes que usar onClick onSubmit="function()"en html.

Me gustaría crear este javascript para no tener que tocar ningún código html como agregar onSubmit o onClick javascript.

¿Por qué la gente siempre usa jQuery cuando no es necesario?
¿Por qué la gente no puede usar JavaScript simple?

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 es una función a la que desea llamar cuando se envía el formulario.

Acerca de EventTarget.addEventListener, consulte esta documentación en MDN .

Para cancelar el submitevento nativo (evitar que se envíe el formulario), use .preventDefault()en su función de devolución de llamada,

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

Escuchando el submitevento con bibliotecas

Si por alguna razón ha decidido que una biblioteca es necesaria (ya está usando una o no quiere lidiar con problemas entre navegadores), aquí hay una lista de formas de escuchar el evento de envío en bibliotecas comunes:

1. jQuery

   $(ele).submit(callback);

   ¿Dónde eleestá la referencia del elemento de formulario y callbackla referencia de la función de devolución de llamada? Referencia

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

   Muy sencillo, ¿dónde $scopeestá el alcance proporcionado por el marco dentro de su controlador ? Referencia

3. Reaccionar

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

   Simplemente pase un controlador al onSubmitaccesorio. Referencia

4. Otros marcos / bibliotecas

   Consulte la documentación de su marco.

Validación

Siempre puede hacer su validación en JavaScript, pero con HTML5 también tenemos validación nativa.

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

¡Ni siquiera necesitas JavaScript! Siempre que la validación nativa no sea compatible, puede recurrir a un validador de JavaScript.

Demostración: http://jsfiddle.net/DerekL/L23wmo1L/

Esta es la forma más sencilla en la que se puede llamar a su propia función de JavaScript cuando onSubmitocurre una .

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

Según sus requisitos, también puede hacer lo siguiente sin bibliotecas como jQuery:

Agregue esto a su cabeza:

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

Y su formulario aún puede verse algo así como:

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

Con jQuery:

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

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