Wie kann ich eine Formularaktion ungültig machen und jQuery ausführen, wenn alle HTML-Formularelemente validiert sind?

Ich habe ein einfaches HTML-Formular, das ich für die erforderliche Feldvalidierung nutzen möchte. Mein Problem ist, dass ich die HTML5-Formularvalidierung verwenden möchte, ABER gleichzeitig das eigentliche Absenden des Formulars vermeiden möchte, da ich stattdessen einen jQuery Ajax-Aufruf ausführen möchte. Ich weiß, dass Sie die HTML5-Validierung deaktivieren können, aber ich möchte dies als meine primäre Methode der Formularvalidierung anstelle eines jQuery-Plugins beibehalten.

Irgendwelche Gedanken?

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>    
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>      
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
    <p>
        <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
    </p>
</form> 

Javascript:

$(function(){
  $("#submitbtn").click(function(){
    $.ajax({
      url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
      success: 
      function(txt){
        if(txt){
          $("#thankyou").slideDown("slow");
        }
      }
    });
  });
});

Dementsprechend: Unterstützen noch irgendwelche Browser die checkValidity()-Methode von HTML5?, und dies ist möglicherweise nicht die neueste Wahrheit, da HTML5 noch in Arbeit ist, die Form.checkValidity() Und element.validity.valid sollte Ihnen den Zugriff auf Validierungsinformationen von JavaScript ermöglichen. Angenommen, das stimmt, müsste sich Ihre jQuery an das Absenden des Formulars anhängen und davon Gebrauch machen:

$('#membershipform').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do whatever you want here
});

Sie können die HTML5-Formularvalidierung von Javascript verwenden, nur die Methode aufrufen reportValidity()

In deinem Beispiel:

<script>
    document.querySelector('#membershipform').reportValidity()
</script>

reportValidity führt die HTML5-Formularvalidierung aus und gibt wahr/falsch zurück.

Verwenden:

$('#membershipform').submit(function(){
    // do whatever you want here

    return false;
});

Dies ist eine subtile Hebelwirkung von Standardverhalten und Javascript, um das zu erstellen, was Sie möchten.

var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
    console.log("valid");
    e.preventDefault();
}else{
    console.log("not valid");
    return;
}

Wenn das Formular gültig ist, dann preventDefault() und mit Ihrer Funktion fortfahren (z. B. über Ajax senden). Wenn nicht gültig, kehren Sie zurück, ohne den Standard zu verhindern. Sie sollten feststellen, dass die Standardaktionen für die Formularvalidierung bei Ihren Formulareingaben auftreten.

Verwenden von reinem Java-Skript

<script>

    document.getElementById('membershipform')
        .addEventListener("submit", 
            function(event) {
                event.preventDefault();

                // write stuff

            });

</script>