2015-10-05 81 views
3

我一直在尝试几天,让这个验证插件工作在jQuery中,我没有运气。jquery验证不在网站上工作

我使用的代码如下。

<head> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> 
</head> 

<script type="text/javascript"> 
    //Jquery Validation, Opening Jquery etc 

    $(function(){ 

     $("#step1form").validate({ 
      rules: { 
       firstName: { 
        required: true 
       } 
      } 
     }); 
    }); 


</script> 
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div> 
    <form id="step1form" action="" method="POST"> 
    <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/> 
    <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/> 
    </form> 

我不知道为什么它不工作,但任何帮助,非常感谢。

+0

你检查任何控制台错误? –

+0

页面未加载,所以我不能。 –

+0

它被卡在载入页面0% –

回答

0

验证对输入的'type'属性起作用。 因此,如下所示更改电子邮件和手机号码的类型。

<form id="step1form" action="" method="POST"> 
    <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0;" type="email" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'"> 
    <input style="width: 100%; margin: 3px 0 3px 0;" type="number" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/> 
    <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/> 
    </form> 

希望这有助于!

1

你已经做了一切正确的事情,但错过了一件事, 你必须指定每个输入类型的名称,因为验证插件工作在元素名称上。

<html> 
 
    <head> 
 
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script> 
 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <script type="text/javascript"> 
 
      //Jquery Validation, Opening Jquery etc 
 

 
      $(function(){ 
 

 
       $("#step1form").validate({ 
 
        rules: { 
 
         firstName: { 
 
          required: true 
 
         }, 
 
         lastName: { 
 
          required: true 
 
         }, 
 
         email: { 
 
          required: true 
 
         }, 
 
         mobile: { 
 
          required: true 
 
         } 
 
        } 
 
       }); 
 
      }); 
 

 

 
     </script> 
 
     <div class="info">We would love to help you out just give us a few details and you'll be on your way!</div> 
 
      <form id="step1form" action="" method="POST"> 
 
       <input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'"> 
 
       <input name="lastName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'"> 
 
       <input name="email" style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'"> 
 
       <input name="mobile"style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/> 
 
       <input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/> 
 
      </form> 
 
     </div> 
 
    </body> 
 
    </html>