フォームが検証されていない場合でも、フォーム提出にはモーダルが表示されます。

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>