Wer weiß, wie ich die Standard-HTML5-Validierung in einem Formular auslösen kann, ohne eine Senden-Schaltfläche zu verwenden? (JavaScript oder jQuery).
Das tue ich nicht möchte senden POST/GET
Anfrage, führen Sie nur die Validierung durch.
Matthias Wolff
Wer weiß, wie ich die Standard-HTML5-Validierung in einem Formular auslösen kann, ohne eine Senden-Schaltfläche zu verwenden? (JavaScript oder jQuery).
Das tue ich nicht möchte senden POST/GET
Anfrage, führen Sie nur die Validierung durch.
mhm
Sie können verwenden BerichtGültigkeit, hat jedoch noch eine schlechte Browserunterstützung. Es funktioniert auf Chrome, Opera und Firefox, aber nicht auf IE, Edge oder Safari:
var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
if (myform.reportValidity) {
myform.reportValidity();
} else {
//warn IE users somehow
}
}
(Gültigkeit prüfen hat eine bessere Unterstützung, funktioniert aber auch nicht unter IE<10.)
Ein Jahr später wird dies laut Can I Use in der neuesten Version aller vier großen Browser unterstützt: caniuse.com/#feat=constraint-validation
– Mark Amery
28. November 2018 um 17:42 Uhr
DraughtGlobe
Nach einiger Recherche habe ich den folgenden Code gefunden, der die Antwort auf Ihre Frage sein sollte. (Zumindest hat es bei mir funktioniert)
Verwenden Sie zuerst dieses Stück Code. Der $(document).ready
stellt 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 Sie einfach an $('#theIdOfMyForm').submit();
in deinem Code.
AKTUALISIEREN
Wenn Sie tatsächlich zeigen möchten, welches Feld der Benutzer im Formular falsch hatte, fügen Sie danach den folgenden Code hinzu event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
Der Fokus wird auf die erste ungültige Eingabe gelegt.
Die Funktion jQuery .each hat sich geändert (?), seit diese Antwort gepostet wurde. Es hat jetzt zwei leicht verwirrende Permutationen. Das oben verwendete .each funktioniert nicht mehr. Ich würde verwenden: var $list = $(f).find(‘:input:visible[required=”required”]’); $.each($list,function(idx,el){
– Jomofrodo
13. September 2016 um 19:48 Uhr
entferne das ! aus der if-Anweisung. Das bricht es für mich.
– Nick Res
3. Dezember 2016 um 22:42 Uhr
Rick Lidl
Die akzeptierte Antwort auf diese Frage scheint das zu sein, wonach Sie suchen.
Kurzzusammenfassung: im Event-Handler für den Submit call event.preventDefault()
.
Dies hat es für mich nicht gelöst. Mit Chrome 27 und wenn ich die Standardeinstellung verhindere, wird auch die HTML5-Validierung übersprungen
– Erich
5. Juni 2013 um 21:19 Uhr
Sie müssen das Formular absenden, 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>
Siehe 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 es jemand aufklären.
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 ausgegeben.
Wenn es keine Fehler gibt, schicke ich das Formular ab.
let applyForm = document.getElementById(formId);
if (!applyForm.checkValidity()) {
if (applyForm.reportValidity) {
applyForm.reportValidity();
} else {
alert(msg.ieErrorForm);
}
} else {
applyForm.submit();
}
Shannon Hochkins
Kurze Antwort, nein, es gibt keine Möglichkeit, die Standardfunktion der HTML5-Blase vor dem Absenden des Formulars inline „auszulösen“, das können Sie checkValidity()
bei bestimmten Eingängen, funktioniert aber wieder nicht so, wie Sie es möchten. Anstatt die Standardeinstellung zu verhindern, wenn Sie das Formular nach Abschluss der Validierung immer noch senden möchten, können Sie diesen Stil dennoch verarbeiten, indem Sie wie folgt vorgehen:
Beachten Sie, dass Sie auf Formularen, auf denen die Validierungs-CSS-Stile nicht angewendet werden sollen, einfach die hinzufügen können novalidate
dem Formular zuweisen.
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 dringend empfehlen, sich damit zu befassen, es ist viel handlicher, einfacher zu schreiben und weniger kompliziert. Hinweis: Im Geigenbeispiel habe ich genau das CSS, das dadurch kompiliert 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 ein paar abgefahrene Sachen machen, um die Standardmeldungen zu verwenden und sie in Ihre eigene „Bubble“- oder Fehlermeldungsbox zu übernehmen.
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 mit der Validierung von HTML5-Formularen, da es großartig ist und veröffentlicht werden muss!
Shannon
Dan
form.submit() funktioniert nicht, da die HTML5-Validierung vor der Formularübermittlung durchgeführt wird. Wenn Sie auf eine Senden-Schaltfläche klicken, wird die HTML5-Validierung ausgelöst und das Formular wird dann gesendet, wenn die Validierung erfolgreich war.