Modal erscheint bei der Formularübergabe, auch wenn das Formular nicht validiert wurde

Question

Ich arbeite an einem Kontaktformular. Nach dem Klicken auf die Schaltfläche "Senden" möchte ich, dass das Formular validiert wird, wenn zum Beispiel Text in das Feld für die Mobiltelefonnummer eingegeben wird. Ich möchte, dass eine Fehlermeldung angezeigt wird. Wenn alle Datentypen im Formular korrekt sind, möchte ich ein Modal anzeigen, das Danke sagt. heres der Code:

<form class="form"> 
       <div class="line"><label style="font-size: 18px;"for="fname">First Name *: </label><input type="text" id="fname" required /></div> 
       <div class="line"><label for="lname">Last Name *: </label><input type="text" id="lname" required /></div> 
       <!-- You may want to consider adding a "confirm" password box also --> 

       <div class="line"><label for="email">Email *: </label><input type="email" id="email"required /></div> 
       <!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp --> 
       <div class="line"><label for="tel">Mobile *: </label><input type="tel"pattern="[789][0-9]{9}" id="tel" required/></div> 
       <div class="line"><label for="add">Address *: </label><input type="text" id="add" required/></div> 
       <div class="line"><label for="ptc">Post Code *: </label><input type="number" maxlenght="6" id="ptc" required /></div> 
       <div><button data-target="modal1" type="submit"class=" waves-effect waves-light btn modal-trigger">Submit<i class="material-icons right">send</i></button></div> 

       <p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p> 
      </form> 

unten ist die Javascript

$(document).ready(function(){ 
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
$('.modal-trigger').leanModal(); 
}); 

hier ist die modale Struktur.

Answer 1

Das Problem mit Ihrem Code ist, dass Sie das falsche Ereignis behandeln. Ich weiß nicht, welches Framework du verwendest, aber deine Schaltfläche zeigt wahrscheinlich das Modal an, wenn auf die Schaltfläche geklickt wird und nicht, wenn das Formular abgeschickt wird. Es wäre besser, auf die Einreichung des Formulars zu achten.

(function($){ 
     $(document).ready(function(){ 
     $('.form').on('submit', function(e){ 
      e.preventDefault(); 
      $('.modal-trigger').leanModal();//Show your modal? 
     }); 
     }); 

    })(jQuery); 

Hier ist ein Beispiel, das ich mit Twitter Bootstrap vorbereitet. Ich habe deine Form und das Modal des Frameworks benutzt. Die Funktionalität muss der gewünschten sehr ähnlich sein.

(function($) { 
 
    $(document).ready(function() { 
 
    $('form.form').on('submit', function(e) { //Handle the submit event of the form 
 
     e.preventDefault(); //This prevents the form from submitting, You might need to delete it in your actual code 
 
     $('#myModal').modal('show'); //In bootstrap this is the function that shows the modal. It might differ on your actual code. \t 
 
    }); 
 
    }); 
 

 
})(jQuery);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<form class="form"> 
 
    <div class="line"> 
 
    <label style="font-size: 18px;" for="fname">First Name *:</label> 
 
    <input type="text" id="fname" required /> 
 
    </div> 
 
    <div class="line"> 
 
    <label for="lname">Last Name *:</label> 
 
    <input type="text" id="lname" required /> 
 
    </div> 
 
    <!-- You may want to consider adding a "confirm" password box also --> 
 

 
    <div class="line"> 
 
    <label for="email">Email *:</label> 
 
    <input type="email" id="email" required /> 
 
    </div> 
 
    <!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp --> 
 
    <div class="line"> 
 
    <label for="tel">Mobile *:</label> 
 
    <input type="tel" pattern="[789][0-9]{9}" id="tel" required/> 
 
    </div> 
 
    <div class="line"> 
 
    <label for="add">Address *:</label> 
 
    <input type="text" id="add" required/> 
 
    </div> 
 
    <div class="line"> 
 
    <label for="ptc">Post Code *:</label> 
 
    <input type="number" maxlenght="6" id="ptc" required /> 
 
    </div> 
 
    <div> 
 
    <button type="submit" class=" waves-effect waves-light btn modal-trigger">Submit</button> 
 
    </div> 
 

 
    <p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p> 
 
</form> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     your modal 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>