jQuery Validator Not Validating onkeyup

Question

After reading a bunch of questions and applying "solutions" to them, I find that the jQuery validator is not validating onkeyup. Which by default, it should. I made sure that the source code was not modified by downloading a fresh file, nothing.

Version: jquery 1.10.2

Validation code:

/* check form */
$("#registerForm").validate({
/*  rules: {
    primaryPhone: {skip_or_fill_minimum: [2,'.firstPhoneSet']},
    contactPrimary: {skip_or_fill_minimum: [2,'.firstPhoneSet']},
    secondaryPhone: {skip_or_fill_minimum: [2,'.phoneNum2']},
    contactSecondary: {skip_or_fill_minimum: [2,'.phoneNum2']}
  }*/
    onkeyup: function(element)
    {
      $(element).valid();
    },
    errorElement: "span",
    rules: 
    {
        birthMonth: 
        {
          skip_or_fill_minimum: [3,'.dob']
        },
        birthDay: 
        {
          skip_or_fill_minimum: [3,'.dob']
        },
        birthYear: 
        {
          skip_or_fill_minimum: [3,'.dob']
        },
        resume: 
        {
          required: true,
          extension: "txt|doc|docx"
        },
        gender: 
        {
          required: true
        },
        ohlWhy:
        {
          required: true,
          wordCount: ['30']
        },
        coping:
        {
          required: true,
          wordCount: ['20']
        },
        intensity:
        {
          required: true,
          wordCount: ['20']
        }
    }
});

Note:

I HAVE tried running this code without

onkeyup: function(element)
{
  $(element).valid();
},

I also have a addClassRules method call:

jQuery.validator.addClassRules({
  field: 
  {
    required: true,
    minlength: 2
  },
  zip: 
  {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  },
  years: 
  {
    required: true,
    digits: true,
    minlength: 1,
    maxlength: 2
  },
  phoneNum: 
  {
    required: true,
    phoneUS: true
  },
    phoneNum2: 
  {
    required: false,
    phoneUS: true
  },
  dropList: 
  {
    required: true
  },
  dob: 
  {
    date: true,
    required: true
  },
});

And nothing. This is a solution I found on another question, but this gives me the error:

Uncaught TypeError: Object [object Object] has no method 'valid'

Which seems weird, because .valid() is a validator method.

The HTML has a LOT of input fields:

<form id="registerForm" action="index.cfm" method="post">
    <fieldset>
      <legend>Basic Information</legend>
      <div class="insets">
          <label class="control-label" for="fName">First Name: </label>
          <input type="text" name="fName" id="fName" class="field" value="<cfoutput>#session.fName#</cfoutput>" /><br />
          <label class="control-label" for="lName">Last Name: </label>
          <input type="text" name="lName" id="lName" class="field" value="<cfoutput>#session.lName#</cfoutput>" /><br />
          <label class="control-label" for="nick">Nickname: <span class="optional">*optional</span></label>
          <input type="text" name="nick" id="nick" value="<cfoutput>#session.nick#</cfoutput>" /><br />
      </div>
    </fieldset>
    <br />
    <input type="hidden" value="2" id="volType" name="volType" />
    <br />

    <!--- only show after choice has been made --->
    <div id="allInfo">
      <fieldset>
        <legend>Contact Information</legend>
        <div class="insets">
          <label class="control-label" for="emailAddy">Email: </label>
          <input type="email" class="input-xlarge" name="emailAddy" id="emailAddy" required value="<cfoutput>#session.emailAddy#</cfoutput>" /><br />

          <!--- show only to shl vols --->
          <span id="shlOnly">
            <label class="control-label" for="rainnEmail">RAINN Email: </label>
            <input type="email" name="rainnEmail" class="input-xlarge" id="rainnEmail" required value="<cfoutput>#session.rainnEmail#</cfoutput>" /><br />
          </span>
          <!--- end show only --->

          <!--- only show to rcc and website vols --->
          <span id="rccANDwebs">
            <label class="control-label" for="address1">Address: </label>
            <input type="text" name="address1" class="input-xlarge field" id="address1" value="<cfoutput>#session.address1#</cfoutput>"/><br />
            <label class="control-label" for="address2">Apartment, Suite, etc: 
            <span class="optional">*optional</span></label>
            <input type="text" name="address2" class="input-xlarge" id="address2" value="<cfoutput>#session.address2#</cfoutput>" /><br />
            <label class="control-label" for="city">City: </label>
            <input type="text" class="field" name="city" id="city" value="<cfoutput>#session.city#</cfoutput>" /> <br />
          </span>
          <!--- end show only --->

          <label class="control-label" for="state">State: </label>
          <select id="state" class="input-mini dropList" name="state">
            <option value="">--</option>
           <cfoutput query="states">
                <option value="#states.id#" <cfif #session.state# EQ #states.id#>selected="selected"</cfif>>#states.stateName#</option>
            </cfoutput>
          </select>
          <label class="control-label" for="zip">Zip: </label>
          <input type="text" name="zip" class="input-small zip" id="zip" value="<cfoutput>#session.zip#</cfoutput>" />

          <label class="control-label" for="primaryPhone">Primary Phone: </label>
          <input type="text" class="input-medium phoneNum firstPhoneSet" name="primaryPhone" id="primaryPhone" placeholder="703-555-1010" value="<cfoutput>#session.primaryPhone#</cfoutput>" />
          <br /><span class="optional">Can we leave a message at this number?</span><br />

          <label class="radio inline" for="contactPrimaryYes">
            <input type="radio" checked name="contactPrimary" id="contactPrimaryYes" value="yes" />Yes 
          </label>

          <label class="radio inline" for="contactPrimaryNo">
            <input type="radio" name="contactPrimary" id="contactPrimaryNo" value="no" />No
          </label>

          <label class="control-label" for="secondaryPhone">Secondary Phone: 
         <span class="optional">*optional</span></label>

         <input type="text" class="input-medium phoneNum2" name="secondaryPhone" id="secondaryPhone" placeholder="703-555-1010" value="<cfoutput>#session.secondaryPhone#</cfoutput>" />
         <br /><span class="optional">Can we leave a message at this number?</span><br />

         <label class="radio inline" for="contactSecondaryYes">
            <input type="radio" name="contactSecondary" id="contactSecondaryYes" value="yes" <cfif IsDefined("session.contactSecondary") AND session.contactSecondary EQ "yes">checked</cfif> />Yes 
          </label>

          <label class="radio inline" for="contactSecondaryNo">
            <input type="radio" name="contactSecondary" id="contactSecondaryNo" value="no" <cfif IsDefined("session.contactSecondary") AND session.contactSecondary EQ "no">checked</cfif> />No
          </label>

        </div>
      </fieldset>

      <!--- if rcc or web --->
      <div class="form-actions" id="non-shlButton"> 
          <button type="submit" style="float:right;" class="btn btn-success">Continue to Step 2 &#187;</button>
      </div>

      <!--- if shl --->
      <div class="form-actions" id="shlButton">
          <button type="submit" style="float:right;" class="btn btn-primary">Submit My Application</button>
      </div>
    </div> <!--- end show after choice --->
  </form>

So my question is: why is my script only validating onfocusout and onsubmit only? (And why am I getting that error when it was the solution to several problems of the same type?)

Answer 1

Add this to validator config:

onkeyup: function( element, event ) {
        if ( event.which === 9 && this.elementValue(element) === "" ) {
            return;
        } else {
            this.element(element);
        }
    },

It overwrites plugin's onkeyup function. It should works.

Now validation plugin works in different way. It first wait for user to enter text, than validate it and when some field was validated once than onkeyup works fine.