Standard-HTML-Validierung (Formular) auslösen, ohne die Schaltfläche „Senden“ zu verwenden? [duplicate]

Lesezeit: 1 Minute

Benutzeravatar von Mattias Wolff
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.

Benutzeravatar von mhm
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.)

Benutzeravatar von DraughtGlobe
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

Benutzeravatar von Rick Liddle
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();
}

Benutzeravatar von Shannon Hochkins
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

Dans Benutzeravatar
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.

1442020cookie-checkStandard-HTML-Validierung (Formular) auslösen, ohne die Schaltfläche „Senden“ zu verwenden? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy