Javascript'teki form gönderme olayını nasıl dinleyebilirim?

Kendi form doğrulama javascript kitaplığımı yazmak istiyorum ve Google'da bir gönder düğmesinin tıklanıp tıklanmadığını nasıl tespit edeceğimi araştırıyorum ama bulduğum tek şey onClick on'u kullanmanız gereken kod. onSubmit="function()" .

Bu javascript'i onSubmit veya onClick javascript eklemek gibi herhangi bir html koduna dokunmak zorunda kalmamak için yapmak istiyorum.

İnsanlar gerekli olmadığında neden her zaman jQuery kullanıyor?
İnsanlar neden basit JavaScript kullanamıyor?

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 form gönderilirken aramak istediğiniz bir işlevdir.

Hakkında EventTarget.addEventListener, MDN ile ilgili bu belgelere göz atın .

Yerel submitolayı iptal etmek için (formun gönderilmesini engellemek), .preventDefault()geri arama işlevinizde kullanın ,

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

submitEtkinliği kütüphanelerle dinlemek

Herhangi bir nedenle bir kitaplığın gerekli olduğuna karar verdiyseniz (zaten bir kitaplık kullanıyorsanız veya tarayıcılar arası sorunlarla uğraşmak istemiyorsanız), ortak kitaplıklarda gönderme olayını dinlemenin yollarının bir listesi:

1. jQuery

   $(ele).submit(callback);

   eleForm öğesi başvurusu nerede ve callbackgeri arama işlevi başvurusu. Referans

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

   Çok basit, denetleyicinizin$scope içindeki çerçeve tarafından sağlanan kapsam nerede ? Referans

3. Tepki

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

   Sadece bir işleyiciyi onSubmitpervaneye iletin. Referans

4. Diğer çerçeveler / kitaplıklar

   Çerçevenizin belgelerine bakın.

onaylama

Doğrulamanızı her zaman JavaScript'te yapabilirsiniz, ancak HTML5 ile yerel doğrulamaya da sahibiz.

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

JavaScript'e bile ihtiyacınız yok! Yerel doğrulama desteklenmediğinde, bir JavaScript doğrulayıcıya geri dönebilirsiniz.

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

Bu, bir onSubmitmeydana geldiğinde kendi javascript işlevinizin çağrılmasını sağlamanın en basit yoludur .

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

Gereksinimlerinize bağlı olarak, jQuery gibi kitaplıklar olmadan da aşağıdakileri yapabilirsiniz:

Bunu kafana ekle:

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

Ve formunuz yine de şunun gibi görünebilir:

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

JQuery ile:

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

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