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.