it-swarm.com.de

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

Wer weiß, wie ich die Standard-HTML5-Validierung in einem Formular auslösen kann, ohne einen Senden-Button zu verwenden? (JavaScript oder jQuery).

Ich möchte nicht möchte POST/GET-Anfrage senden, nur die Validierung durchführen.

61
Mattias Wolff

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

Kurze Zusammenfassung: Rufen Sie im Event-Handler für das Senden event.preventDefault() auf.

19
Rick Liddle

Nach einiger Recherche habe ich den folgenden Code entwickelt, der die Antwort auf Ihre Frage sein sollte. (Zumindest hat es für mich funktioniert)

Verwenden Sie zuerst diesen Code. $(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 $('#theIdOfMyForm').submit(); in Ihrem Code auf.

UPDATE

Wenn Sie tatsächlich anzeigen möchten, in welchem ​​Feld der Benutzer im Formular falsch war, fügen Sie nach event.preventDefault(); den folgenden Code ein.

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

Dadurch wird der Fokus auf die erste ungültige Eingabe gelegt.

26
DraughtGlobe

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

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

( checkValidity hat eine bessere Unterstützung, funktioniert aber nicht auf IE <10.)

14
mhm

Sie müssen das Formular absenden, damit die Validierung von HTML5 funktioniert. Es gibt einen Weg, um 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 für mich nicht funktioniert. Also habe ich einen versteckten Submit-Button erstellt, der beim Keyup ausgelöst wird. Frag mich nicht warum. Vielleicht könnte jemand das klären. 

10
john.dou.2011

Kurze Antwort, nein, es gibt keine Möglichkeit, die Standardfunktionalität der html5-Bubble-Inline vor dem Senden des Formulars zu "auslösen". Sie können checkValidity() für bestimmte Eingaben verwenden, funktioniert aber nicht wie gewünscht. Wenn Sie die Standardeinstellung nicht verhindern möchten, können Sie diesen Stil trotzdem verarbeiten, wenn Sie das Formular nach Abschluss der Validierung noch senden möchten. Gehen Sie dazu wie folgt vor:

Hinweis: In Formularen, in denen die Validierungs-CSS-Formatvorlagen nicht verwendet werden sollen, können Sie einfach das novalidate-Attribut 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 nicht mit SCSS arbeiten, würde ich es sehr empfehlen, es zu untersuchen. Es ist viel einfacher zu handhaben, einfacher zu schreiben und weniger kompliziert. Hinweis: Im Geige-Beispiel habe ich genau die CSS, die von diesem kompiliert wird. Ich habe auch ein Beispiel für einen Blasenstil eingefü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 Ihrem eigenen 'Bubble'- oder Fehlermeldungsfeld 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, denn es ist großartig und muss raus!

Shannon

2

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 Meldungen meiner Anwendung.

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

Wenn es keine Fehler gibt, reiche ich das Formular ein.

let applyForm = document.getElementById(formId);

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

form.submit () funktioniert nicht, da die HTML5-Validierung vor der Formularübergabe ausgeführt wird .. Wenn Sie auf die Schaltfläche zum Abschicken klicken, wird die HTML5-Validierung trigerred und das Formular wird übermittelt, wenn die Validierung erfolgreich war.

1
p5yk0

ich habe verwendet 

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

aber sein show error " event ist undefined ", so verwenden Sie in diesem Fall event parameter wie 

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

jetzt funktioniert es gut

0
sms247

Ich denke es ist einfacher:

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

dadurch wird das Senden abgebrochen, bis das Formular gültig ist.

0
aleXela

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>
0
Nadi h

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 es 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();
        }
    });
0
Karl Adler

Probieren Sie HTMLFormElement.reportValidity () aus, wo diese Funktion die Eingabevalidierungen aufruft.

0
Lex Feria