2015-10-05 113 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>