1. 首页
  2. 问答
  3. 验证对提交不起作用

验证对提交不起作用

2017-02-18 77 views
3

我试过使用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>

来源

2017-02-18 Prasath V

回答

3

退房这个答案

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>

来源

2017-02-18 06:48:03 Sasi

+0

谢谢Swathy ...它正在工作 –

0

尝试增加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; 
      } 
     });

来源

2017-02-18 05:36:05

+0

没有它不工作。 –

+0

页面现在仍在加载或验证不起作用？ –

+0

验证不起作用 –

0

请使用以下代码并尝试。

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

来源

2017-02-18 06:02:04

+0

验证无法正常工作 –

1

SubmitHandler不工作，因为在代码中的错误：

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

应该

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

，并尝试在submitHandler使用提醒我相信你会得到它，就像

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

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

来源

2017-02-18 06:40:04

相关问题

 相关问题