So this code looks fine, I can’t seem to see where the error is coming from. It is wrapped correctly in $(document).ready(function(){.
$("#signup-form").validate({
rules: {
firstname: 'required',
signup-email: 'required',
signup-password: 'required',
signup-password-v: 'required'
},
messages: {
firstname: 'Your firstname is required!',
signup-email: 'Your email is required!',
signup-password: 'A password is required!',
signup-password-v: 'Please verify your password!'
}
});
I call the jquery.validate after the jquery library in the html head tags so any ideas?
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' type='text/css' href='./css/index.css' />
<script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div id="navbar">
<div id="title">CrockShark.com</div>
</div>
<div id="container">
<div id="navcontainer">
<ul id="navlist">
<li>Find great Crockpot recipes</li>
<li>Save 'em</li>
<li>Post your own</li>
<li>See how many people like yours</li>
</ul>
</div>
<div id="signup">
<form id="signup-form">
<label>First Name:</label>
<input type="text" class="signup-input" id ="firstname" name="firstname" /><br />
<label>Last Name:</label>
<input type="text" class="signup-input" id="lastname" name="lastname" /><br />
<label>Birthday:</label>
<select id="month" name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="day" name="day">
<?php for ($i=1; $i<=31; $i++) { echo "<option value='$i'>$i</option>"; } ?>
</select>
<select id="year" name="year">
<?php for ($i=2012; $i>=1900; $i=$i-1) { echo "<option value='$i'>$i</option>"; } ?>
</select><br />
<label>Email:</label>
<input type="text" class="signup-input" id="signup-email" name="signup-email" /><br />
<label>Password:</label>
<input type="password" class="signup-input" id="signup-password" name="signup-password" /><br />
<label>Verify Password:</label>
<input type="password" class="signup-input" id="signup-password-v" name="signup-password-v" /><br />
<input type="button" id="signup-button" name="signup-button" value="Join!" />
</form>
</div>
<div id="login">
<div id="login-wrapper">
<label>Email:</label><input type="text" class="login" id="login-email" /><br />
<label>Password:</label><input type="password" class="login" id="login-password" />
<input type="button" id="login-button" value="Login" />
</div>
</div>
</div>
</body>
</html>
You can’t have dashes in property names:
I think you can wrap those properties in quotes, though, and get your desired effect: