Como posso ouvir o evento de envio do formulário em javascript?

Eu quero escrever minha própria biblioteca javascript de validação de formulário e eu estive procurando no google como detectar se um botão de envio é clicado, mas tudo o que encontrei foi o código em que você deve usar o onClick onSubmit="function()"em html.

Gostaria de criar esse javascript para não precisar tocar em nenhum código html, como adicionar javascript onSubmit ou onClick.

Por que as pessoas sempre usam jQuery quando não é necessário?
Por que as pessoas não podem simplesmente usar JavaScript simples?

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 é uma função que você deseja chamar quando o formulário está sendo enviado.

Sobre EventTarget.addEventListener, confira esta documentação no MDN .

Para cancelar o submitevento nativo (impedir que o formulário seja enviado), use .preventDefault()na sua função de retorno de chamada,

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

Ouvindo o submitevento com bibliotecas

Se, por algum motivo, você decidiu que uma biblioteca é necessária (você já está usando uma ou não quer lidar com problemas entre navegadores), veja uma lista de maneiras de ouvir o evento de envio em bibliotecas comuns:

1. jQuery

   $(ele).submit(callback);

   Onde eleestá a referência do elemento do formulário e callbacksendo a referência da função de retorno de chamada. Referência

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

   Muito simples, onde $scopeestá o escopo fornecido pela estrutura dentro do seu controlador . Referência

3. Reagir

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

   Basta passar um manipulador para o onSubmitsuporte. Referência

4. Outras estruturas / bibliotecas

   Consulte a documentação da sua estrutura.

Validação

Você sempre pode fazer sua validação em JavaScript, mas com HTML5 também temos validação nativa.

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

Você nem precisa de JavaScript! Sempre que a validação nativa não for suportada, você poderá fazer o fallback para um validador JavaScript.

Demonstração: http://jsfiddle.net/DerekL/L23wmo1L/

Essa é a maneira mais simples de chamar sua própria função javascript quando onSubmitocorrer uma .

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

Com base nos seus requisitos, você também pode fazer o seguinte sem bibliotecas como o jQuery:

Adicione isso à sua cabeça:

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

E seu formulário ainda pode ser algo como:

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

Com jQuery:

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

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