Validate Html Form With Jquery
Solution 1:
Remove non-existing fields from validation rule, url etc. I have removed these and its working. Working http://jsfiddle.net/xyRRU/ , check the code below:
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Register</title><metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-5"><linktype="text/css"href="style1.css" /><linktype="text/css"href="forms.css" /><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scripttype="text/javascript"src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script><scripttype="text/javascript">
$(document).ready(function() {
$("#registerform").validate({
messages: {
firstname: "Please enter your firstname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
email: "Please enter a valid email address"
},
rules: {
username: "required",
firstname: "required",
email: {// compound rulerequired: true,
passwd: true,
email: true,
},
},
});
});
</script><styletype="text/css">label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style></head><body>
Please register below
<p /><formaction=" "id="registerform"method="POST"><tablecellspacing="9"><tr><td><b>Username:</b></td><td><inputtype="text"name="username"size="30"></td></tr><tr><td><b>First name:</b></td><td><inputtype="text"name="firstname"size="30"/></td></tr><tr><td><b>Surname:</b></td><td><inputtype="text"name="lastname"size="30"/></td></tr><tr><td><b>Email : </b></td><td><inputtype="text"name="email"size="30"/></td></td></tr><tr><td><b>Password :</b></td><td><inputtype="password"name="passwd"size="30"/></td></tr><tr><td><b>Telephpone:</b></td><td><inputtype="text"name="telephone"size="30"/></td></td></tr><tr><td><b>House No:</b></td><td><inputtype="text"name="ad1"size="30"/></td></td></tr><tr><td><b>Street Name:</b></td><td><inputtype="text"name="street"size="30"/></td></tr><tr><td><b>Town/ City:</b></td><td><inputtype="text"name="town"size="30"/></td></tr><tr><td><b>Post code:</b></td><td><inputtype="text"name="pcode"size="30"/></td></tr></table><p /><inputclass="submit"type="submit"value="Sign Up!" /><inputtype="reset"value ="Clear Form"onClick="return confirm('Are you sure you want to reset the form?')"></form></body>Solution 2:
Check your syntax - you have a comma left in here:
rules: {
username:"required",
firstname:"required",
email: {//compoundrulerequired:true,
passwd:true,
email:true**,**
},
Remove that and see how you get on.
Solution 3:
You're getting JavaScript errors. Run this fiddle to see, http://jsfiddle.net/nickyt/Sjvh2 . It looks like the validation plug-in is throwing errors on line 493. Start debugging ;)
Solution 4:
Your link to jquery.validate.js is returning a 403 Forbidden error, which means you're not actually importing the plugin.
Try this link instead: http://view.jquery.com/trunk/plugins/validate/jquery.validate.js
<scripttype="text/javascript"src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>Better still, point to a local copy of the file.
Also, do check that you're not getting any JS errors using firebug.
Edit : This change alone will not solve your problem, but you really shouldn't be hotlinking the script from dev.jquery.com. See related answer, and Hotlinking to be disabled on January 31, 2011.
Post a Comment for "Validate Html Form With Jquery"