[jQuery][validate] Getting duplicate error messages after plugging in UI and setting classes
Having got my basic validation working I then set about putting it into some nice UI. On either success or failure it always appends to the error message without removing the old message, so it ends up with a string of messages for each of the fields.
The validation looks like this:
jQuery.validator.setDefaults({
errorClass: "error ui-corner-all ui-state-highlight",
success: "valid ui-corner-all ui-icon ui-icon-circle-check",
focusCleanup: true
});
$(function(){
$("#form-tips").validate({
onkeyup:false,
onfocusout: function(element) {
$(element).valid(); },
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
rules: {
first_name: {
required:true,
minlength:2,
maxlength:30
},
last_name: {
required:true,
minlength:2,
maxlength:40
},
gender: {
required:true
},
email_address: {
required:true,
email:true,
maxlength:255,
remote: {
url: "check-email.php",
type: "post"
}
},
password1: {
required:true,
minlength:6,
maxlength:128
},
password2: {
required:true,
equalTo: "#password1"
},
terms: {
required:true
}
},
messages: {
first_name: {
required: "First Name is required.",
minlength: jQuery.format("First Name must be at least {0} characters in length."),
maxlength: jQuery.format("First Name can not exceed {0} characters in length.")
},
last_name: {
required: "Last Name is required.",
minlength: jQuery.format("Last Name must be at least {0} characters in length."),
maxlength: jQuery.format("Last Name can not exceed {0} characters in length.")
},
email_address: {
required: "email address is required.",
email: "please use a valid email",
maxlength: jQuery.format("email address can not exceed {0} characters in length."),
remote:"sorry,this email address is already registered."
},
password1: {
required: "password is required.",
minlength: jQuery.format("password must be at least {0} characters in length."),
maxlength: jQuery.format("password can not exceed {0} characters in length.")
},
password2: {
required: "please confirm password.",
equalTo: "confirmed password does not match."
},
terms: {
required: "please read and agree the privacy policy."
}
}
});
});
The HTML like this ( with some irrelevant table rows removed for brevity)
<form action="process_registration.php" method="post" id="form-tips" accept-charset="UTF-8" class="ui-form">
<table border="0" width="1024" cellspacing="5" cellpadding="0">
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="first_name">First name</label>
</td>
<td width="320" align="left">
<input name="first_name" type="text" size="20" class="ui-corner-all"/>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="last_name">Last name</label>
</td>
<td width="320" align="left">
<input name="last_name" type="text" size="20" class="ui-corner-all"/>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label>Date of birth</label>
</td>
<td width="320" align="left">
<select name="birth_month"><option value="">Month...</option><option value="01">January</option><option value="02">February</option><option value="03">March</option><option value="04">April</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">August</option><option value="09">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select><select name="birth_day"><option value="">Day...</option><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select><select name="birth_year"><option value="">Year...</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option><option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option><option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option></select>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="gender">Your gender</label>
</td>
<td width="320" align="left">
<select name="gender"><option value="">Select one...</option><option value="F">Female</option><option value="M">Male</option></select> </td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="email_address">Your email address</p>
</td>
<td width="320" align="left">
<input name="email_address" type="text" size="20" class="ui-corner-all"/>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="Timezone">Your time zone</label>
</td>
<td width="320" align="left">
<select
name="Timezone" id="Timezone">
<option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10.0">(GMT -10:00) Hawaii</option>
<option value="-9.0">(GMT -9:00) Alaska</option>
<option value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-3.5">(GMT -3:30) Newfoundland</option>
<option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
<option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option selected="selected" value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="3.5">(GMT +3:30) Tehran</option>
<option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="4.5">(GMT +4:30) Kabul</option>
<option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
<option value="5.75">(GMT +5:45) Kathmandu</option>
<option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
<option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="password1">Choose a password</label>
</td>
<td width="320" align="left">
<input name="password1" type="password" size="20" class="ui-corner-all"/>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
<label for="password2">Re-enter password</label>
</td>
<td width="320" align="left">
<input name="password2" type="password" size="20" class="ui-corner-all"/>
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
</td>
<td width="320" align="left">
<label class="ident" for="terms"></label><input type="checkbox" name="terms" value="1" id="terms" class="ui-corner-all" /> I agree to the <a href="/wordpress/privacy" target="_blank">Privacy Policy</a>.
</td>
<td width="289">
</td>
</tr>
<tr>
<td width="115">
</td>
<td width="300" align="right">
</td>
<td width="320" align="left">
<input name="submit" type="submit" value="Register" />
</td>
<td width="289">
</td>
</tr>
</table>
</form>