You've added the class "required" to the username input. That gets added as a rule to the field...
Jörn On Thu, Aug 21, 2008 at 12:37 AM, zaroundus <[EMAIL PROTECTED]> wrote: > > Sure. You can view this form at www.roundus.com/zaroundus/uploadApp/ > > The validation is performed on submission of the sign-up form. I've > been over this code a thousand times and can't figure it out so any > help would be greatly appreciated. I look forward to your response. > > On Aug 20, 5:12 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]> > wrote: >> I can't see anything obviously wrong with your code. Could you post a >> testpage? >> >> Jörn >> >> On Wed, Aug 20, 2008 at 10:16 PM, zaroundus <[EMAIL PROTECTED]> wrote: >> >> > I am using the Validate plugin >> > fromhttp://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. >
