I am struggling with the code below which is supposed to validate the SubmitForm when the button is clicked. It successfully changes the textboxes to red and displays an error message with a symbol if validation fails. However, I am wondering how I can show a different symbol or a text message when the user enters correct details into the text boxes. I am currently using the jQuery Validation plugin available at this link.
Example.html
<fieldset id="fieldset1">
<legend>Registration Details:</legend>
<form id="SubmitForm">
Name of business:<br/>
<input size="30" type="text" id="businessname" class="required" name="businessname"/><br/>
Zipcode:<br>
<input size="30" type="text" id="zipcode" class="required zipcode" name="zipcode"/><br>
Telephone:<br/>
<input size="30" type="text" id="telephone" class="required phone" name="telephone"/><br/>
Email:<br/>
<input size="30" type="text" id="email" class="required email" name="email"/>
</fieldset>
<br/>
Your email is your User Name:<br/>
<input size="30" type="text" id="username" class="required" name="email"/><br/>
Choose Password:<br/>
<input size="30" type="text" id="pass" class="required password" class="required" name="password"/><br/>
Retype Password:<br/>
<input size="30" type="text" id="pass1" equalTo="#pass"/><br/>
<input id="Addresslisting" type="image" src="images/Submit.png" align="left" />
</form>
</feildset>
Example.js
$(document).ready(function () {
$("#Addresslisting").click(function () {
$("#SubmitForm").validate();
});
});
Example.css
label {
width: 10em;
float: left;
}
label.error {
color: red;
padding: 8px 200px 0px 0px;
vertical-align: top;
float: right;
background: url("unchecked.gif") no-repeat 120px 0px;
}
input.error {
border: 1px solid red;
}
input.errorlist {
margin: 0;
color: red;
margin-bottom: 10px;
}
#fieldset1 {
border: 1px solid #1f76c8;
width: 500px;
margin: 5px;
padding: 10px 15px 5px 15px;
}