модальный появляется при отправке формы, даже если форма не подтверждена

Question

Я работаю над формой для связи. После нажатия на кнопку отправки я хочу, чтобы форма была проверена, например, если текст введен в поле номера мобильного телефона, я хочу, чтобы сообщение об ошибке отображалось. , если все типы данных в форме правильные, я хочу, чтобы модальный отображался, который говорит спасибо. Heres код:

<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> 

ниже является Javascript

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

здесь структура покадрово.

<div id="modal1" class="modal"> 
<div class="modal-content"> 
<h4>Thank You</h4> 
<p>Our Customer service team will contact you shortly</p> 
</div> 
<div class="modal-footer"> 
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a> 
</div> 
</div> 

Answer 1

Проблема с вашим кодом заключается в том, что вы обрабатываете неправильное событие. Я не знаю, какие рамки вы используете, но ваша кнопка, вероятно, показывает модальность при нажатии кнопки, а не при отправке формы. Было бы лучше наблюдать за отправкой события в форме.

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

    })(jQuery); 

Вот пример, который я подготовил, используя загрузочный лоток Twitter. Я использовал вашу форму и модальную структуру. Функциональность должна быть очень похожа на ту, которую вы хотите.

(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>