I have just implemented input field validations e.g. "Please enter your name" if an input field is left empty.
I done this through JQuery mobile, however the issue I am not having is that when the user submits (registerUser(); ) the form the validations do not occur (if left empty) in time and instead the data is submitted into the database.
How can I prevent the page from loading and parsing the data into the database if there are empty fields?
HTML -
<form id="form1">
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" data-theme="d" placeholder="Enter Username"/>
</div>
<div data-role="fieldcontainer">
<label for="txtfirstname" data-theme="d">First Name:</label>
<input type="text" id="txtfirstname" name="txtfirstname" data-theme="d" placeholder="Enter First Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtlastname" data-theme="d">Last Name:</label>
<input type="text" id="txtlastname" name="txtlastname" data-theme="d" placeholder="Enter Last Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtemail" data-theme="d">Email:</label>
<input type="email" id="txtemail" name="txtemail" data-theme="d" placeholder="Enter Enter Email"/>
</div>
<div data-role="fieldcontainer">
<label for="txtpassword" data-theme="d">Password:</label>
<input type="text" id="txtpassword" name="txtpassword" data-theme="d" placeholder="Enter Password"/>
</div>
<div data-role="fieldcontainer">
<label for="passwordconfirm" data-theme="d">Confirm Password:</label>
<input type="text" id="passwordconfirm" name="passwordconfirm" data-theme="d" placeholder="Confirm password"/>
</div>
<br>
<input type="submit" value="Register User" onclick="return registerUser(); return false;">
JavaScript File (JQuery Mobile) -
$('#form1').validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtlastname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtlastname: {
required: "Please enter your Last Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form) {
$(':mobile-pagecontainer').pagecontainer('change', '#success', {
reload: false
});
return false;
}
});
userRegister Function
function registerUser() {
var Username = document.getElementById("txtusername").value;
var Firstname = document.getElementById("txtfirstname").value;
var Lastname = document.getElementById("txtlastname").value;
var Email = document.getElementById("txtemail").value;
var Password = document.getElementById("txtpassword").value;
var Confirmpass = document.getElementById("passwordconfirm").value;
db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024);
db.transaction(function(tx) {
NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass);
}, errorRegistration, successRegistration);
}
function NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass) {
var _Query = ("INSERT INTO SoccerEarth(UserName, FirstName, LastName, Email, Password, CPass) values ('"+ Username +"','"+ Firstname +"','"+ Lastname +"','"+ Email +"', '"+ Password +"', '"+ Confirmpass +"')");
alert(_Query);
tx.executeSql(_Query);
}
function errorRegistration(error) {
navigator.notification.alert(error, null, "Got an error mate", "cool");
}
function successRegistration() {
navigator.notification.alert("User data has been registered", null, "Information", "ok");
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
}
I removed onclick="return registerUser(); return false;" from the input button and placed it in the submitHandler.
To prevent the form submission i added .
$('#form1').submit(function(e) {
e.preventDefault();
})
$(document).ready(function () {
function registerUser(form) {
var formdata = $(form).serializeArray()
console.log(formdata);
}
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtlastname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtlastname: {
required: "Please enter your Last Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
registerUser(form);
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js
"></script>
<form id="form1">
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" data-theme="d" placeholder="Enter Username"/>
</div>
<div data-role="fieldcontainer">
<label for="txtfirstname" data-theme="d">First Name:</label>
<input type="text" id="txtfirstname" name="txtfirstname" data-theme="d" placeholder="Enter First Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtlastname" data-theme="d">Last Name:</label>
<input type="text" id="txtlastname" name="txtlastname" data-theme="d" placeholder="Enter Last Name"/>
</div>
<div data-role="fieldcontainer">
<label for="txtemail" data-theme="d">Email:</label>
<input type="email" id="txtemail" name="txtemail" data-theme="d" placeholder="Enter Enter Email"/>
</div>
<div data-role="fieldcontainer">
<label for="txtpassword" data-theme="d">Password:</label>
<input type="text" id="txtpassword" name="txtpassword" data-theme="d" placeholder="Enter Password"/>
</div>
<div data-role="fieldcontainer">
<label for="passwordconfirm" data-theme="d">Confirm Password:</label>
<input type="text" id="passwordconfirm" name="passwordconfirm" data-theme="d" placeholder="Confirm password"/>
</div>
<br>
<input type="submit" value="Register User">
</form>
Related
I am trying to use jquery validation for a php form to change your password but I keep getting the error "Your password must be the same as above" when the password is correct. I can't seem to find out where I have went wrong at all... Here's the JS code
var changepassword = function() {
return {
init: function() {
/*
* Jquery Validation, https://github.com/jzaefferer/jquery-validation
*/
$('#changepassword').validate({
errorClass: 'help-block animation-slideUp',
errorElement: 'div',
errorPlacement: function(error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function(e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function(e) {
if (e.closest('.form-group').find('.help-block').length === 2) {
e.closest('.help-block').remove();
} else {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
}
},
rules: {
'newpassword': {
required: true,
minlength: 6
},
'newpassword-verify': {
equalTo: '#newpassword',
required: true
}
},
messages: {
'newpassword': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long'
},
'newpassword-verify': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long',
equalTo: 'Please enter the same password as above'
}
}
});
}
};
}();
This is the PHP/HTML for the form
<form method="POST" class="form-horizontal form-bordered" id="changepassword">
<div class="form-group">
<label class="col-md-3 control-label" for="newpassword">New Password</label>
<div class="col-md-6">
<input type="password" id="newpassword" name="newpassword" class="form-control" placeholder="New Password" required>
</div>
</div>
<!-- This is where I keep getting the error -->
<div class="form-group">
<label class="col-md-3 control-label">Repeat Password</label>
<div class="col-md-6">
<input type="password" id="newpassword-verify" name="newpassword-verify" class="form-control" placeholder="Repeat Password" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="oldpassword">Current Password</label>
<div class="col-md-6">
<input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group form-actions">
<button type="submit" name="update" class="btn btn-block btn-primary">Update</button>
</div>
</form>
Sorry, I was able to fix it by making a new file called settings1.php then removing the old one and renaming the new one with the old name.
I am doing my form validation with jquery validation plugin. Everything seems fine but its not working. No message appears. Or may be its due to files that I have included.
files included
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
here is jquery
<script type="text/javascript">
$(function($){
$("#joinform").validate({
rules: {
firstname: {
required: true,
maxlength: 30
},
lastname: {
required: true,
maxlength: 30
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "#password"
}
},
messages: {
firstname: {
required: "Please enter your firstname",
maxlength: "Firstname is too large"
},
lastname: {
required: "Please enter your lastname",
maxlength: "Lastname is too large"
},
email: {
required: "Please enter email address",
email: "Please enter the valid email"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
repassword: {
required: "Please confirm your password",
equalTo:"Passwords should be same"
}
}
});
});
</script>
here is html.
<form role="form" name="joinform" id="joinform" action="" method="post">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" class="form-control" name="firstname" placeholder="First Name" required/>
<input type="text" class="form-control" name="lastname" placeholder="Last Name" required/>
<br/>
<label for="email">Email: </label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required email/>
<br/>
<label for="pwd">Password: </label>
<input type="password" class="form-control" name="password" placeholder="at least 6 characters long" required/>
<label for="repass">Retype-Password:</label>
<input type="password" class="form-control" name="repassword" placeholder="Confirm your password" required/>
<br/>
Already a member?Login<br/>
<br/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
When using any jQuery plugin, you must load jQuery first. You are also including the plugin twice. You must not include each plugin more than once... preferably use the latest version.
This is correct...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
Otherwise, use the latest plugin version supported by your version of jQuery...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
I am having a strange issue with the jQuery Validation plugin.
I have a field TwitterUsername that is not required and has no validation. If I don't enter anything into this field it works fine. However, if I enter any value in this field I am presented with the Please enter a valid email address. message that is tied to the EmailAddress field above it.
You can see this behavior at: http://eat-sleep-code.com/#!/contact
Below is the main code of this webpage:
<form role="form" id="ContactMessageForm">
<div class="form-group">
<label for="FirstName" class="sr-only">First Name</label>
<input type="text" id="FirstName" name="FirstName" maxlength="255" class="form-control" placeholder="First Name" />
</div>
<div class="form-group">
<label for="LastName" class="sr-only">Last Name</label>
<input type="text" id="LastName" name="LastName" maxlength="255" class="form-control" placeholder="Last Name" />
</div>
<div class="form-group">
<label for="EmailAddress" class="sr-only">Email Address</label>
<input type="email" id="EmailAddress" name="EmailAddress" maxlength="255" class="form-control" placeholder="Email Address" />
</div>
<div class="form-group">
<label for="TwitterUsername" class="sr-only">Twitter Username</label>
<input type="text" id="TwitterUsername" name="TwitterUsername" maxlength="255" class="form-control" placeholder="Twitter Username" />
</div>
<div class="form-group">
<label for="Subject" class="sr-only">Subject</label>
<input type="text" id="Subject" name="Subject" maxlength="255" class="form-control" placeholder="Subject" />
</div>
<div class="form-group">
<label for="Message" class="sr-only">Message</label>
<textarea id="Message" name="Message" rows="5" class="form-control" placeholder="Message"></textarea>
</div>
<button type="button" class="btn btn-default" id="ContactMessageSendButton">Send</button>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#ContactMessageSentAlert').hide();
$('#ContactMessageForm').show();
$.validator.addMethod('twitterUsername', function(value, element) {
return this.optional(element) || /^(#?[a-zA-Z0-9]{1,15})$/.test(value);
}, '');
var validator = $('#ContactMessageForm').validate({
errorClass: 'has-error',
errorElement: 'div',
rules: {
FirstName: {required: true},
LastName: {required: true},
EmailAddress: {required: true, email: true},
TwitterUsername: {twitterUsername: true},
Subject: {required: true},
Message: {required: true}
},
messages: {
FirstName: {required: 'Please enter your first name.'},
LastName: {required: 'Please enter your last name.'},
EmailAddress: {required: 'Please enter your email address.', email: 'Please enter a valid email address.'},
TwitterUsername: {twitterUsername: 'Please enter a valid Twitter username.'},
Subject: {required: 'Please enter a subject.'},
Message: {required: 'Please enter a message.'}
},
errorPlacement: function (error, element) {
$(error).insertBefore($(element));
},
highlight: function(element, errorClass) {
$(element).parent('div').addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).parent('div').removeClass(errorClass);
},
onfocusout: false
});
});
</script>
<script type="text/javascript">
/* Assign an OnClick function to items in the "Send" button */
$('#ContactMessageSendButton').click(function(e) {
$(document).ready(function () {
var form = $('#ContactMessageForm');
form.validate();
if (form.valid() === true) {
var sender = $.trim($('#EmailAddress').val());
var senderName = $.trim($('#FirstName').val()) + ' ' + $.trim($('#LastName').val());
var recipient = 'info#eat-sleep-code.com';
var subject = $.trim($('#Subject').val());
var message = $.trim($('#Message').val()) + '<br />' + $.trim($('#TwitterUsername').val());
sendMail(sender, senderName, recipient, subject, message);
}
});
});
</script>
I am trying to call JavaScript function while submitting the form.
Here is code but while submitting function not called, please suggest something and I want to show error messages using javascript method as well , how can I show error messages in validation using JavaScript.
<form id="register" name="register" onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
},
"email": {
required: true,
}
}
});
});
</script>
and here is JavaScript code
function validateForm()
{
var password = document.forms["register"]["Password"].value;
var con-password = document.forms["register"]["Confirm-Password"].value;
if(password != con-password)
{
document.getElementById('password-error').style.visibility='visible';
alert("not matched");
}
alert("matched");
}
This is probably due to a syntax error in your script. When you see errors like that, look into the JavaScript console of your browser.
In this case, con-password is not a valid variable name. What JavaScript sees is:
var con - password ...
i.e. the code says "substract password from con". Try an underscore instead:
var con_password ...
Do not need to do anything extra for password matching, just add equalTo: "#Password" to it as shown in the below example:
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm-Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
Working example:
<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm_Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm_Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
</script>
Maybe instead of checking if passwords matches you can add new rule in validation?
something like:
... "Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"} ....
and for messages add:
... messages: {
"Password": "Your message",
}...
and all in all something like this: `
$(document).ready(function () {
$("Your form name").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
email: true
}
}
messages: {
"Password": "Your message",
"email": "Your Message",
},
submitHandler: function (form) {
form.submit();
}
});
});`
try this. i add onclick event on the submit button to call the function validateForm()
html
<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>
</form>
this is the validateForm()
<script type="text/javascript">
function validateForm() {
var username = $('#Username'),
password = $('#Password'),
confirm = $('#Confirm-Password'),
email = $('#email');
$('#register').submit(function(ev){
// check if all fields is not empty
if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
ev.preventDefault(); // prevent form submit
alert('All fields are required.'); //alert message
//check if password and confirm password is equal
} else if(password.val() != confirm.val()){
ev.preventDefault(); // prevent form submit
alert('password did not match.'); //alert message
} else {
return true; // submit form if validation has passed.
}
});
}
</script>
May be you missed - you need to use method="post" in
http://jsfiddle.net/dLbLS/
<form id="register" name="register" method="post" onsubmit="validateForm();" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>
</form>
Use this code
<input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">
do one thing i am sending one link please go through that link i have commented my code over there copy and paste it and test it....
How to do validation in JQuery dialog box?
if this answer is correct then please mark it as answer for others....
I have used the jquery form validation from this site http://jquery.bassistance.de/validate/demo/. In this site validation works when the field values are empty. I need it to work if i set values to the form fields for example the value for the email field is Email Address. How can i modify that?. The internal script that i have used is
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
This is my html
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
So my understanding from your question is that if they leave the field with the default value, e.g. "Email Address", you want that to error. You'll need to create your own custom validation method, using the addMethod function. Then you refer to that method in your options. I think something like this is the correct syntax:
$.validator.addMethod("checkdefault", function (value, element, params) {
if (params[0] == params[1] || params[0].length === 0) {
// user hasn't changed value from the default, or they've left it completely blank
return false;
} else {
return true;
}
});
email: {
// pass an array of params, first one is the field value, second is your default text
checkdefault: [$("#email").val(), 'Email Address'],
email: true
}
When you have set you values, call $("#signupForm").validate() if you set your values from javascript. If you do it with server side technology validate on document.Ready()