html - how to display a symbol next to the textboxes after sucessfull validation using jquery plugins -
i have following code perform validation of submitform shown below on click of button form validated correctly changes textboxes red color , displays error message symbol.but problem how display other symbol example right tick mark symbol or text message on user entering correct details text boxes using following plugin validation http://jquery.bassistance.de/validate/jquery.validate.js
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/> email 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; }
you use success this,
.validate({ success: function(label) { label.text("ok!").addclass("success"); // add <label class="success">ok!</label> // i'm assuming, errorelement: "label" }, rules: { number: { required:true, minlength:3, maxlength:15, number:true } } });
you can see here.
Comments
Post a Comment