I have an issue with my code it seems the .validate is not working but all the documents are connected and working sweet:
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
Your code, as you’ve posted it, is working as expected… jsFiddle DEMO
Regarding your code…
If you’ve put jQuery into noConflict mode, then your code in noConflict mode is broken.
When using
noConflictmode, you must pass the$symbol into thedocument.readyfunction. Working demo…OR, you’d use
jQueryin place of$everywhere. Working demo…Otherwise, without using no-conflict mode, it would just look like this. Working demo…