提出時に検証が機能しない

Question

jquery.validate.min.jsを使用してフォーム検証を試みました。

[送信]ボタンをクリックすると、空の必須フィールドに赤い枠が表示されます。問題は、[送信]ボタンをクリックしている間にページが読み込まれたことです

検証が機能しません。どこに問題があるのか​​分かりません。前もって感謝します。

jQuery(".submit-form").validate({ 
 
       rules: { 
 
        fname: { 
 
         required: true, 
 
        }, 
 
        lname: { 
 
         required: true, 
 
        }, 
 
        phone: { 
 
         required: true, 
 
        }, 
 
        mail: { 
 
         required: true, 
 
         mail: true 
 
        }, 
 
        subjct: { 
 
         required: true, 
 
        }, 
 
        message: { 
 
         required: true, 
 
        }, 
 
       }, 
 
       submitHandler: function (form) { 
 
        var postData = $(form).serializeArray(); 
 
        var result = {}; 
 
        $.each(postData, function() { 
 
         result[this.name] = this.value; 
 
        }); 
 
        return false; 
 
       }, 
 
       invalidHandler: function (form, validator) { 
 
        $('form input,textarea').each(function() { 
 
         if ($(this).val() == "") { 
 
          $(this).css('border', '1px solid red'); 
 
         } else { 
 
          $(this).css('border', '1px solid #d2d2d2'); 
 
         } 
 
        }); 
 
       }, 
 
       errorPlacement: function (error, element) { 
 
        return true; 
 
       } 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
 
<form class="submit-form" method="post"> 
 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common fname" name="fname" placeholder="First Name"> 
 
          </div> 
 

 
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common" name="lname" placeholder="Last Name"> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common" name="phone" id="phone" placeholder="Number"> 
 
          </div> 
 

 
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="email" class="input-common" name="mail" placeholder="Email ID"> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 

 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12"> 
 
           <textarea placeholder="Message" name="message" class="input-txtarea"></textarea> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 

 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="submit" class="submit" value="send message"> 
 
          </div> 
 
          <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div> 
 
         </div> 
 
        </form>

Answer 1

この答えをチェックしてください

jQuery(function ($) { 
 
      $("#submit-form").validate({ 
 
       rules: { 
 
        fname: { 
 
         required: true, 
 
        }, 
 
        lname: { 
 
         required: true, 
 
        }, 
 
        phone: { 
 
         required: true, 
 
        }, 
 
        mail: { 
 
         required: true, 
 
         mail: true 
 
        }, 
 
        subjct: { 
 
         required: true, 
 
        }, 
 
        message: { 
 
         required: true, 
 
        }, 
 
       }, 
 
       submitHandler: function (form) { 
 
        var postData = $(form).serializeArray(); 
 
        var result = {}; 
 
        $.each(postData, function() { 
 
         result[this.name] = this.value; 
 
        }); 
 
        return false; 
 
       }, 
 
       invalidHandler: function (form, validator) { 
 
        $('form input,textarea').each(function() { 
 
         if ($(this).val() == "") { 
 
          $(this).css('border', '1px solid red'); 
 
         } else { 
 
          $(this).css('border', '1px solid #d2d2d2'); 
 
         } 
 
        }); 
 
       }, 
 
       errorPlacement: function (error, element) { 
 
        return true; 
 
       } 
 
      }); 
 
     })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
 

 
<form id="submit-form" method="post"> 
 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common fname" name="fname" placeholder="First Name" required /> 
 
          </div> 
 

 
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common" name="lname" placeholder="Last Name"> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="name" class="input-common" name="phone" id="phone" placeholder="Number" required /> 
 
          </div> 
 

 
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="email" class="input-common" name="mail" placeholder="Email ID" required /> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 

 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12"> 
 
           <textarea placeholder="Message" name="message" class="input-txtarea" required /></textarea> 
 
          </div> 
 
          <div class="col-lg-offset-2 col-md-offset-2"></div> 
 
         </div> 
 

 
         <div class="row input-row-common"> 
 
          <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12"> 
 
           <input type="submit" class="submit" value="send message" /> 
 
          </div> 
 
          <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div> 
 
         </div> 
 
        </form>

Answer 2

フォームの送信中に自動ページの読み込みを防ぐためにpreventDefault()を追加してみてください。

$(".submit-form").submit(function(e) { 

    console.log("> I am e.preventDefault "); 
    e.preventDefault();      # add this line 

    }).validate({ 
     rules: { 
       fname: { 
        required: true, 
       }, 
       lname: { 
        required: true, 
       }, 
       phone: { 
        required: true, 
       }, 
       mail: { 
        required: true, 
        mail: true 
       }, 
       subjct: { 
        required: true, 
       }, 
       message: { 
        required: true, 
       }, 
      }, 
      submitHandler: function (form) { 
       console.log(" In submitHandler!!"); # to make sure code is executing 

       var postData = $(form).serializeArray(); 
       var result = {}; 
       $.each(postData, function() { 
        result[this.name] = this.value; 
       }); 
       return false; 
      }, 
      invalidHandler: function (form, validator) { 

       console.log(">>> In invalidHandler!!"); # add this line 

       $('form input,textarea').each(function() { 
        if ($(this).val() == "") { 
         $(this).css('border', '1px solid red'); 
        } else { 
         $(this).css('border', '1px solid #d2d2d2'); 
        } 
       }); 
      }, 
      errorPlacement: function (error, element) { 
       return true; 
      } 
     }); 

Answer 3

次のコードを使用して試してください。

mail: { 
    required: true, 
    mail: true 
}, 

それは

mail: { 
     required: true, 
     email: true 
    }, 

でなければならないと私はあなたがそれを得るだろうと確信してsubmitHandlerでアラートを使用してみてください：あなたのコードに誤りがありますので

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 

     <form class="submit-form" method="post"> 
        <div class="row input-row-common"> 
         <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
          <input type="name" class="input-common fname" name="fname" placeholder="First Name"> 
         </div> 

         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
          <input type="name" class="input-common" name="lname" placeholder="Last Name"> 
         </div> 
         <div class="col-lg-offset-2 col-md-offset-2"></div> 
        </div> 
        <div class="row input-row-common"> 
         <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"> 
          <input type="name" class="input-common" name="phone" id="phone" placeholder="Number"> 
         </div> 

         <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> 
          <input type="email" class="input-common" name="mail" placeholder="Email ID"> 
         </div> 
         <div class="col-lg-offset-2 col-md-offset-2"></div> 
        </div> 

        <div class="row input-row-common"> 
         <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12"> 
          <textarea placeholder="Message" name="message" class="input-txtarea"></textarea> 
         </div> 
         <div class="col-lg-offset-2 col-md-offset-2"></div> 
        </div> 

        <div class="row input-row-common"> 
         <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12"> 
          <input type="submit" class="submit" value="send message"> 
         </div> 
         <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div> 
        </div> 
       </form> 




       <script> 
        jQuery(".submit-form").validate({ 
          rules: { 
           fname: { 
            required: true, 
           }, 
           lname: { 
            required: true, 
           }, 
           phone: { 
            required: true, 
           }, 
           mail: { 
            required: true, 
            email: true 
           }, 
           subjct: { 
            required: true, 
           }, 
           message: { 
            required: true, 
           }, 
          }, 
          submitHandler: function (form) { 
           /*var postData = $(form).serializeArray(); 
           console.log("psots data using ajax or normal submit"+postData);*/ 

           form.submit(); 
          }, 
         }); 
       </script> 

Answer 4

SubmitHandlerが動作していません、

submitHandler: function (form) { 
        alert('submit'); 
        return false; 
       }, 

DEMO：http://jsfiddle.net/ACdtX/