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 [EMAIL PROTECTED]",
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 /
>
<label for="email">Email: </label>
<input type="text" id="email" name="email"
class="required email" /
><br />
<label for="stAddr">Street Address: </label>
<input type="text" id="stAddr" name="stAddr"
class="required" /
><br />
<label for="city">City: </label>
<input type="text" id="city" name="city"
class="required" />
<label for="state">State: (if
applicable)</label>
<select id="state" name="state" size="1">
<option value="0">Choose a
state</option>
<?
foreach($states as $sKey => $sVal) {
echo '<option value="'.$sKey.'">'.$sVal.'</option>';
}
?>
</select><br />
<label for="country">Country: </label>
<select id="country" name="country">
<option value="0">Choose your
country</option>
<?
foreach($countries as $cKey => $cVal) {
echo '<option value="'.$cKey.'">'.$cVal.'</option>';
}
?>
</select><br />
</fieldset>
<input type="submit" id="uRegSub" name="uRegSub"
value="Register" /
> <input type="reset" value="Clear Form" />
</form>
<div id="formErrors">
<ul></ul>
</div>
[/code]
Hope someone can help me figure out how to call my added methods if
input is empty.
