2012-04-12 197 views
0

我有一個問題,我的代碼似乎.validate不工作,但所有的文件連接和工作甜:jQuery驗證不工作

HTML:

<!DOCTYPE html> 
<html> 
    <title>Site Name Quote Form</title> 
    <link rel="stylesheet" href="http://domain.co.nz/_assets/css/style.css"/> 
<body> 
    <div id="wrapperQuote"> 
     <h1>Site Name Quote</h1> 

      <p class="quoteError"><?php echo validation_errors(); ?></p> 

      <p class="step">Step 1: Company Details</p> 

     <form id="quote" action="home/hosting" method="post"> 
      <fieldset> 
      <legend>Company Details:</legend> 
      <label for="companyName">Company Name: </label><input type="input" name="companyName" id="companyName"/> 
      <label for="companySlogan">Company Slogan: </label><input type="input" name="companySlogan" id="companySlogan"/> 
      <label for="companyContact">Company Contact: </label><input type="input" name="companyContact" id="companyContact"/> 
      <label for="companyEmail">Company E-Mail: </label><input type="email" name="companyEmail" id="companyEmail"/> 
      <label for="companyWebsite">Company Website: </label><input type="url" name="companyWebsite" id="companyWebsite" placeholder="http://"/> 
      <label for="companyPhone">Company Phone: </label><input type="phone" name="companyPhone" id="companyPhone"/> 
      <label for="companyFax">Company Fax: </label><input type="phone" name="companyFax" id="companyFax"/> 
      <label for="companyAddress">Company Address: </label><textarea name="companyAddress" id="companyAddress"></textarea> 
      <input type="submit" class="nextButton" value="Next" /> 
      </fieldset> 
     </form> 
     </div> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
      <script>window.jQuery || document.write('<script src="http://domain.co.nz/_assets/js/jquery-1.7.2.min.js"><\/script>')</script> 
      <script src="http://domain.co.nz/_assets/js/jquery.validate.min.js"></script> 
      <script src="http://domain.co.nz/_assets/js/quote.js"></script> 
</body> 
</html> 

quote.js :

jQuery(document).ready(function() { 
    //Home Validation 
    $("#quote").validate({ 
     rules:{ 
      companyName:{ 
       required: true, 
       url: true 
      } 
     } 
    }); 
etc etc 
+0

你是否開始了任何錯誤信息? – pollirrata 2012-04-12 22:23:06

+1

您是否嘗試過在輸入元素上將該類設置爲「required」並查看是否有效?這是另一種聲明規則的方式。如上所述,你是否遇到任何控制檯錯誤? – 2012-04-12 22:29:53

+1

_「不起作用」_是什麼意思? – Sparky 2012-04-12 22:37:22

回答

7

您的代碼正如您所期望的那樣工作...... jsFiddle DEMO

關於你的代碼...

jQuery(document).ready(function() { 
    //Home Validation 
    $("#quote").validate({ 
     rules:{ 
      companyName:{ 
       required: true, 
       url: true 
      } 
     } 
    }); 
}); 

如果你已經把jQuery的成noConflict mode,然後your code in noConflict mode is broken

使用noConflict模式時,您必須將$符號傳遞給document.ready函數。 Working demo ...

$.noConflict(); 
jQuery(document).ready(function($) { 
    $("#quote").validate({ 
     // rules 
    }); 
}); 

或者,你會代替$使用jQuery無處不在。 Working demo ...

$.noConflict(); 
jQuery(document).ready(function() { 
    jQuery("#quote").validate({ 
     // rules 
    }); 
}); 

否則,不使用無衝突模式,它只是這個樣子。 Working demo ...

$(document).ready(function() { 
    $("#quote").validate({ 
     // rules 
    }); 
});