Überschreiben html5-Validierung

Arbeite ich an einem einfachen login-Formular mit zwei Feldern:

<form>
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

Für moderne Browser, die Validierung wird automatisch ausgelöst.

Allerdings, wenn Javascript verfügbar ist, möchte ich über das html5-Formular-Validierung, und verarbeiten alles selbst.

Möchte ich überprüfen automatisch 'onblur' (nur den betroffenen Bereich) und ich möchten, überprüfen Sie alle Felder, wenn "senden" geklickt wird.

Des onblur-events funktionieren, allerdings.. Wenn 'Absenden' gedrückt wird, wird der standard 'submit' - Ereignis wird nicht ausgelöst. Jedoch, eine 'invalid' - Ereignis ausgelöst wird; aber nur für das erste Ereignis invalid.

Was ist ein schöner Weg, um dem browser mitteilen zu ignorieren, HTML5-bezogene Validierung und übernehmen die gesamte Prozess?

  • Hey, bitte unaccept meine Antwort akzeptieren und willydee ist, es ist falsch.
  • Erledigt, danke
InformationsquelleAutor Evert | 2012-02-09
  1. 12

    Bitte beachten Sie, dass — obwohl einige Browser unterstützen möglicherweise das Attribut novalidate auf EINGANG Elemente der HTML-code nicht validieren.

    Laut Dokumentation gibt es kein solches Attribut. Nur die FORM element enthalten kann, die novalidate Attribut.

    • +1. Die novalidate Attribut ist nur auf unterstützten form Elemente, und kann ersetzt werden durch die formnovalidate - Attribut submit-buttons und Bilder nur. Die "normalen" Eingänge besitzen kein solches Attribut. In der Tat, ich weiß nicht, ob diese Lösung arbeitete zu der Zeit war die Antwort gepostet, aber es funktioniert nicht wie heute in der neuesten Chrome und Firefox (demo). 1 2
    InformationsquelleAutor willydee
  2. 4

    Diese Antwort ist falsch. Bitte sehen willydee Antwort.

    Einfach, fügen Sie einfach die novalidate - Eigenschaft auf ein beliebiges element, die Sie nicht wollen, dass der browser zu überprüfen, etwa so:

    <form>
  <input type="email" name="email" required novalidate />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

    Denn Sie wollen nur kündigen, Validierung, wenn JavaScript verfügbar ist, fügen Sie es mit JavaScript (mit jQuery für Vereinfachtes Beispiel)

    $('input[novalidate]').attr('novalidate', 'novalidate');

    • Aber ich würde noch gerne den browser zu überprüfen, wenn javascript ist nicht verfügbar.
    • Dann fügen Sie das novalidate-Attribut mit javascript.
    • Oder legen Sie die required Eigenschaft false mit JavaScript.
    • bearbeitet auch diese Anforderung.
    • Ich sollte in der Lage zu kommen mit dieser Antwort selbst 🙂 Danke !
    • Hinzufügen der novalidate - Attribut auf das input-Feld nicht wie heute in der neuesten Chrome oder Firefox. Siehe: stackoverflow.com/questions/9216115/...
    • Danke. Habe ich einen Ping der Fragesteller und fragte ihn, ändern Sie die akzeptieren-mark (für die er).
    • Eine mehr bestimmte Hinweis-und weniger Durchgestrichen wäre hilfreich... Wenn die Antwort ist nun ganz falsch, bitte löschen.

    InformationsquelleAutor Madara Uchiha
  3. 1

    Weitere option, wenn Sie mit jQuery z.B. ist das Attribut zu entfernen.

    $("input[required],select[required],textarea[required]").removeAttr('required');
    InformationsquelleAutor tabris
  4. 0

    Vielleicht können Sie javascript verwenden, um alles umzuwandeln "required" Attribute in "Daten erforderlich" für Sie behandeln können Sie mit javascript zu überschreiben, html5 Formular-Validierung mit eigenen handler

    InformationsquelleAutor Alex Rock
  5. 0

    Wenn Sie möchten, bedingte HTML5-Validierung Betrieb.

    Meine Bedingung ist, dass ich möchte aufhören, Validierung, wenn der Benutzer speichern möchten, gibt es Daten, aber wenn sein möchten, senden Sie die form, die ich überprüfen möchten.

    <button name="btn_act" value="Submit" type="submit" class="btn">Submit</button>
<button name="btn_act" value="save" type="submit" class="btn">Save</button>

$(document).on('click','[name="btn_act"]',function(){

        var $form = $(this).closest('form');
        //console.log($form);
        if(this.value === 'save')
            $form[0].noValidate = true;
        else
            $form[0].noValidate = false;
        //$form.data('validator').cancelSubmit = true;
        //$form.submit();
    });
    InformationsquelleAutor Ali Sufyan
Schreibe einen Kommentar