HTML5-Validierung mit jQuery?

Question

Ich habe ein großes Registrierungsformular, das ich mit Jquery Cycle aufgeteilt habe, so dass man nur kleine Teile sieht und wenn man auf "Weiter" klickt, ist es nur ein weiteres "Dia".

Ich möchte die HTML5-Validierung für die Eingabefelder auslösen, aber ich kann nicht bei jeder "Folie" eine Schaltfläche zum Absenden verwenden, sondern nur einmal am Ende. Gibt es eine Möglichkeit, die Eingaben anhand einer Schaltfläche zu validieren, und wenn alles in Ordnung ist, wird einfach mit der nächsten Folie fortgefahren. Wenn ein leeres Feld vorhanden ist, sollte es ausgelöst werden und nicht vorwärts gleiten. Kann mir jemand helfen?

<form method="post" action="" id="frm">

<div id="modules">

    <div id="module_0">
        <p><input type="text" id="fname" name="fname" placeholder="Enter your first name" required /></p>
        <p><input type="text" id="lname" name="lname" placeholder="Enter your last name" required /></p>
        <p><input type="email" id="email" name="email" placeholder="Enter your e-mail" required /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_1">Academic
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_2">Professional
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="text" id="test" placeholder="TEST" /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
        <p><input type="submit" id="submit" name="submit" value="Send message"/></p>    </div>          
    </div>

</form>

Answer 1

Sie können die checkValidity() Methode der Form:

Gibt true zurück, wenn alle Steuerelemente, die der Constraint-Validierung unterliegen, ihre Constraints erfüllen, oder false, wenn einige Steuerelemente ihre Constraints nicht erfüllen. Löst bei jedem Steuerelement, das seine Beschränkungen nicht erfüllt, ein Ereignis namens invalid aus; solche Steuerelemente werden als ungültig betrachtet, wenn das Ereignis nicht abgebrochen wird.

Beachten Sie, dass diese Methode in älteren Browsern höchstwahrscheinlich nicht vorhanden ist! Prüfen Sie also, ob sie tatsächlich existiert, bevor Sie sie aufrufen.