HTML5 Form Validierung in einem Bootstrap Modal

Ich bin relativ neu zu jquery und Javascript. Das Formular öffnet sich beim Klicken auf den Button "Modal öffnen" im Modal. Als nächstes, wenn ich auf 'Speichern' im Modal klicke, sollte es das HTML5-Formular validieren und bei erfolgreicher Validierung eine andere Funktion aufrufen "addDetails()".HTML5 Form Validierung in einem Bootstrap Modal

Wie erreiche ich dies mit dem vorhandenen jquery form validation plugin oder einer anderen Methode? Auf welche CDNs muss ich bei der Verwendung verweisen?

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button> 

     <div id="myFormModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 


      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Add details</h4> 
       </div> 
       <div class="modal-body"> 
       <form class="form-horizontal" id="myForm" name="contact" action="#"> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="dor">Date of Registeration:</label> 
        <div class="col-sm-8"> 
         <input type="date" class="form-control" id="dor" name="dor" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="name">Name:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="name" name="name" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="weburl">Website:</label> 
        <div class="col-sm-8"> 
         <input type="url" class="form-control" id="weburl" name="weburl" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="myphoto">Image:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="myphoto" name="myphoto" required> 
        </div> 
        </div> 
        <hr /> 
        <div class="form-group">   
        <div class="col-sm-offset-3 col-sm-3"> 
         <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="reset" class="btn btn-primary btn-sm">Reset</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button> 
        </div> 
        </div> 
       </form> 
       </div> 
      </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-04-04 Sunny

Haben Sie ein Beispielformular:

<form> 
<textarea required></textarea> 
<input type="submit" style="display:none;"/> 
</form> 

<a>Some other button to trigger event</a>

Jetzt müssen wir prüfen, ob das Formular korrekt ausgefüllt ist:

//this is <a> click event: 
if (!$('form')[0].checkValidity()) { 
$('form').find('input[type="submit"]').click(); 
return false; 
}

Dies wird das Senden auslösen Form aber, weil es nicht senden sind Fehler;)

Es scheint, dass HTML5 Validierungsfehler bei Eingabe [type = "submit"] click angezeigt werden :)

Hoffnung wird auch für Sie arbeiten! :)

Quelle

2017-04-04 06:11:50

Danke..aber wie rufe ich eine andere Funktion auf erfolgreiche Validierung? Sollte der Button-Typ in diesem Fall noch 'submit' sein? – Sunny

Am Senden rufen Sie die gewünschte Methode, aber innerhalb dieser Methode überprüfen Sie zuerst die oben genannte Bedingung .... Wenn Ergebnis ist falsch beenden oder Popup anzeigen, dass die Validierung fehlgeschlagen .. –

HTML5 Form Validierung in einem Bootstrap Modal

Antwort

Verwandte Themen