[jQuery] [validate] custom method not working if input element is empty.
I am using the Validate plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/.
It is a great plugin but I'm having one little problem that is driving
me mad. I have a form that I am validating. The problem is, if you
don't type anything into the username or password input and submit
them empty the default message shows and my logs never get output. If
I do type anything into those inputs the methods fire perfectly. It
seems to be something with if you leave the value empty but I have no
idea where to turn. Here is the code I'm using:
Javascript:
[code]
//Add methods and rules to jquery.validate
//username validation
$.validator.addMethod("username",function(value, element) {
var charTest = value.match(/[A-Za-z0-9]/);
var currLen = value.length;
if (charTest && currLen >= 8 && currLen <= 16) {
console.log("Username Match successful!");
return true;
} else {
console.log("Username Match unsuccessful");
return false;
}
},"Username must be between 8 - 16 characters and cannot contain
punctuation.");
//password validation
$.validator.addMethod("pwd", function(value, element) {
var charTest = value.match(/[A-Za-z0-9]/);
var currLen = value.length;
if (charTest && currLen >= 8 && currLen <= 12) {
console.log("Password Match successful!");
return true;
} else {
console.log("Password unsuccessful");
return false;
}
},"Password must be between 8 - 12 characters and cannot contain
punctuation.");
//Adds class rules for methods added above
$.validator.addClassRules({
username: {required:true},
pwd: {required:true}
});
$(function() {
//validates sign-up form
$("#uRegForm").validate({
debug:true,
onkeyup:false,onclick:false,onfocusout:false,
errorContainer: '#formErrors, #notice',
errorLabelContainer: "#formErrors ul",
wrapper: 'li',
rules: {
username: {
username: true,
minlength:1
},
pwd: "pwd",
fName: {
required:true,
minlength:3
},
email: {
required: true,
email: true
},
stAddr:"required",
city:"required"
},
messages: {
fName: "Please enter your full name.",
email: "Your email address must be in the form name@domain.com",
stAddr: "Please enter your street address.",
city: "Please enter your city"
},
showErrors:function(errorMap, errorList) {
$("#notice").fadeIn();
this.defaultShowErrors();
}
});
});
[/code]
Here is the HTML for my form:
[code]
<div id="notice">There was a problem with your submission. See list
below the form for details.</div>
<form id="uRegForm" action="" method="POST">
<fieldset>
<legend>Complete the form to register</legend>
<label for="username">Username: (8-16 characters) </label>
<input type="text" id="username" name="username" class="required
username" /><br />
<label for="pwd">Password: (8 - 12 characters) </label>
<input type="password" id="pwd" name="pwd" class="required
password" /><br />
<label for="fName">Full Name: </label>
<input type="text" id="fName" name="fName" class="required" /><br /