Standard-HTML5-Validierung (Formular) auslösen, ohne die Schaltfläche "Senden" zu verwenden?

Antworten:

23

Die akzeptierte Antwort auf diese Frage scheint das zu sein, wonach Sie suchen.

Kurze Zusammenfassung: Rufen Sie im Ereignishandler für die Übermittlung auf event.preventDefault().

Rick Liddle
quelle
30
Das hat es für mich nicht gelöst. Wenn Sie Chrome 27 verwenden und die Standardeinstellung verhindern, wird auch die HTML5-Validierung übersprungen
Erich,
31

Nach einigen Recherchen habe ich den folgenden Code gefunden, der die Antwort auf Ihre Frage sein sollte. (Zumindest hat es bei mir funktioniert)

Verwenden Sie zuerst diesen Code. Die $(document).readystellt sicher , dass der Code ausgeführt wird , wenn das Formular in das DOM geladen wird:

$(document).ready(function()
{
    $('#theIdOfMyForm').submit(function(event){
        if(!this.checkValidity())
        {
            event.preventDefault();
        }
    });
});

Dann rufen $('#theIdOfMyForm').submit();Sie einfach Ihren Code an.

AKTUALISIEREN

Wenn Sie tatsächlich anzeigen möchten, welches Feld der Benutzer im Formular falsch angegeben hat, fügen Sie anschließend den folgenden Code hinzu event.preventDefault();

$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
    if(!this.validity.valid)
    {
        $(this).focus();
        // break
        return false;
    }
});

Es wird sich auf die erste ungültige Eingabe konzentrieren.

DraughtGlobe
quelle
1
Die Funktion jQuery .each hat sich geändert (?), Seit diese Antwort veröffentlicht wurde. Es hat jetzt zwei leicht verwirrende Permutationen. Die oben verwendete .each funktioniert nicht mehr. Ich würde verwenden: var $ list = $ (f) .find (': Eingabe: sichtbar [erforderlich = "erforderlich"]'); $ .each ($ list, function (idx, el) {
jomofrodo
entferne das ! aus der if-Anweisung. Das bricht es für mich.
Nick Res
21

Sie können reportValidity verwenden , es hat jedoch noch keine schlechte Browserunterstützung. Es funktioniert unter Chrome, Opera und Firefox, jedoch nicht unter IE, Edge oder Safari:

var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
    if (myform.reportValidity) {
        myform.reportValidity();
    } else {
        //warn IE users somehow
    }
}

( checkValidity bietet eine bessere Unterstützung, funktioniert aber auch nicht mit IE <10.)

mhm
quelle
1
Ein Jahr später wird dies in der neuesten Version aller vier Hauptbrowser
Mark Amery
11

Sie müssen das Formular senden, damit die HTML5-Validierung funktioniert. Es gibt einen Weg, um das zu bekommen, was Sie wollen. Siehe den Code:

<body>
    <h1>Validation Example</h1><br />
    <h2>Insert just 1 digit<h2>
    <form id="form" onsubmit="return false">
        <label>Input<input type="text" pattern="[0-9]" id="input" /></label> 
        <input type="submit" class="hide" id="inputButton">         
    </form>
</body>

Sehen Sie ein Beispiel hier

Hinweis: Die Verwendung von form.submit () hat bei mir nicht funktioniert. Also habe ich einen versteckten Submit-Button erstellt, der beim Keyup ausgelöst wird. Frag mich nicht warum. Vielleicht könnte jemand es klären.

john.dou.2011
quelle
4

Dies ist meine Implementierung der von @mhm vorgeschlagenen Lösung, bei der ich die Verwendung von jQuery verworfen habe.

Die Variable formId enthält die ID des Formulars und msg ist ein Objekt mit Nachrichten meiner Anwendung.

Diese Implementierung versucht, den Benutzer mit den nativen HTML 5-Fehlermeldungen zu benachrichtigen. Wenn dies nicht möglich ist, wird eine generische Formularfehlermeldung angezeigt.

Wenn es keine Fehler gibt, sende ich das Formular. 

let applyForm = document.getElementById(formId);

if (!applyForm.checkValidity()) {
  if (applyForm.reportValidity) {
    applyForm.reportValidity();
  } else {
    alert(msg.ieErrorForm);
  }
} else {
  applyForm.submit();
}
Dayron Gallardo
quelle
2

Kurze Antwort, nein, es gibt keine Möglichkeit, die Standardfunktionalität der HTML5-Blase inline vor dem Absenden des Formulars auszulösen. Sie können checkValidity()bestimmte Eingaben vornehmen, funktionieren aber wieder nicht wie gewünscht. Ohne die Standardeinstellung zu verhindern, wenn Sie das Formular nach Abschluss der Validierung noch senden möchten, können Sie diesen Stil dennoch wie folgt verarbeiten:

Hinweis: Bei Formularen, bei denen die Validierungs-CSS-Stile nicht angewendet werden sollen, können Sie das novalidateAttribut einfach zum Formular hinzufügen .

HTML:

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

Wenn Sie SCSS nicht verwenden, würde ich Ihnen wärmstens empfehlen, es zu untersuchen. Es ist viel einfacher zu handhaben, einfach zu schreiben und weniger kompliziert. Hinweis: Im Geigenbeispiel habe ich genau das CSS, das dies kompilieren wird. Ich habe auch ein Beispiel für einen Blasenstil beigefügt.

SCSS:

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

JAVASCRIPT:

Hier können wir einige funky Sachen machen, um die Standardnachrichten zu verwenden und sie in Ihrer eigenen "Blase" oder Fehlermeldung zu erben.

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item);

DEMO:

http://jsfiddle.net/shannonhochkins/wJkVS/

Viel Spaß und ich hoffe, ich helfe anderen bei der Validierung von HTML5-Formularen, da es fantastisch ist und es da raus muss!

Shannon

Shannon Hochkins
quelle
1

form.submit () funktioniert nicht, da die HTML5-Validierung vor dem Einreichen des Formulars durchgeführt wird. Wenn Sie auf eine Senden-Schaltfläche klicken, wird die HTML5-Validierung ausgelöst und das Formular wird gesendet, wenn die Validierung erfolgreich war.

p5yk0
quelle
1

Ich denke es ist einfacher:

$('submit').click(function(e){
if (e.isValid())
   e.preventDefault();
//your code.
}

Dadurch wird die Übermittlung gestoppt, bis das Formular gültig ist.

aleXela
quelle
1

Wie in den anderen Antworten angegeben, verwenden Sie event.preventDefault (), um das Senden von Formularen zu verhindern.

Um das Formular zu überprüfen, bevor ich eine kleine jQuery-Funktion geschrieben habe, können Sie diese verwenden (beachten Sie, dass das Element eine ID benötigt!).

(function( $ ){
    $.fn.isValid = function() {
        return document.getElementById(this[0].id).checkValidity();
    };
})( jQuery );

Beispiel Verwendung

 $('#submitBtn').click( function(e){

        if ($('#registerForm').isValid()){
            // do the request
        } else {
            e.preventDefault();
        }
    });
Karl Adler
quelle
0

Ich habe benutzt 

objectName.addEventListener('click', function() {
event.preventDefault();
}

aber sein show error " event is undefined ", also benutze in diesem Fall event parameter wie

objectName.addEventListener('click', function(event) {
event.preventDefault();
}

Jetzt funktioniert es gut

sms247
quelle
0

Ich weiß, dass es ein altes Thema ist, aber wenn es einen sehr komplexen (insbesondere asynchronen) Validierungsprozess gibt, gibt es eine einfache Problemumgehung:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>
Nadi h
quelle
2
Es ist keine gute Idee, dieselbe Antwort für verschiedene Fragen zu veröffentlichen. Sie haben hier genau die gleiche Antwort wie diese gepostet . Wenn Sie der Meinung sind, dass beide Fragen, für die Sie eine Antwort gepostet haben, gleich sind, können Sie diese Antwort für eine Frage posten und die andere Frage als Duplikat der ersten markieren ...
EhsanT
0

Versuchen Sie HTMLFormElement.reportValidity (), wobei diese Funktion die Eingabevalidierungen aufruft.

Lex Feria
quelle