Question

We have a form which uses the JQuery Validation Plugin and would like to ignore any form field values which have not been changed from their default values.

For example, we have a credit card update form and only display the last four of the credit card number for security. It looks something like this:

**** 5629

This default value will be different for each user as the last four of their credit cards will be different.

If the user does not alter their default credit card value during their profile update, we’d like to bypass the validation routing on this form field as obviously it would not validate as a valid credit card number.

Here is our current validation snippet:

card_number: {
  required: true,
  creditcard: true
}

messages: {
  card_number: {
    required: "Please enter a <strong>valid credit card number</strong>.",       
  }

And here is the form field:

<input type="text" name="card_number" id="card_number" title="Your credit card number." value="************ 5629" />

How can we ignore validating any form field values which have not been changed from their default values?

Thanks.

===============================================

NEW NOTE TO ANDREW:

I think we’re running into a little glitch due to the way in which we are validating the credit card TYPE.

Here is the complete snippet along with your initial fix:

card_number: {
  creditcardtypes: function() {
    // return an object with a property named the same as the pay method
    var result = new Object();
    var propertyName = $('select[name="pay_method"]').val().toLowerCase();
    var propertyValue = 1;
    eval("result."+propertyName+"='"+propertyValue+"'");
    return result;
  },
  ccnotdefault: true,
  required: true
},

How can we also accommodate the credit card TYPE rule? Right now, validation fails because the default credit card value is not a valid credit card type.

Thanks again Andrew.

================================================

FORM FIELDS:

          <!--- PAYMENT METHOD FIELD --->
      <tr>
        <td style="padding-top:15px; text-align:right; width:45%;"><label for="pay_method">&nbsp;Payment Method:
          <span class="orderlineredsm"><strong> * </strong></span></label></td>
        <td style="padding-top:15px; text-align:left; width:55%;" colspan="2" align="left" id="pmethod">
          <select name="pay_method" id="pay_method" class="highlightme required" style="width: 115px;" onchange="jQuery('#card_number').valid()" title="Your Payment Method.">
              <option value="Visa" <cfif form.pay_method EQ "Visa">selected="selected"</cfif>>Visa</option>
              <option value="Mastercard" <cfif form.pay_method EQ "Mastercard">selected="selected"</cfif>>Mastercard</option>
              <option value="Amex" <cfif form.pay_method EQ "Amex">selected="selected"</cfif>>Amex</option>
              <option value="Discover" <cfif form.pay_method EQ "Discover">selected="selected"</cfif>>Discover</option>
              <option value="Diners" <cfif form.pay_method EQ "Diners">selected="selected"</cfif>>Diners</option>
          </select>
        </td>
      </tr>
      <!--- END PAYMENT METHOD FIELD --->

      <!--- CARD NUMBER FIELD --->
      <tr>
        <td style="text-align:right; width:45%;"><label for="card_number">&nbsp;Credit Card Number:
          <span class="orderlineredsm"><strong> * </strong></span></label></td>
        <td style="text-align:left; width:55%;" colspan="2" align="left" id="cnumber">
          <input type="text" name="card_number" id="card_number" class="highlightme" style="width: 130px;" maxlength="19" title="Your credit card number." value="************<cfoutput>#form.card_number#</cfoutput>" onfocus="clearText(this)" onblur="clearText(this)" />
          &nbsp;<span class="create-tooltip" title="For your protection and security, only the <strong>last four digits of your credit card number</strong> are shown.<br /><br /><strong>NOTE:</strong> Only change if you are updating your credit card number."><img src="/public/images/help_25.png" style="margin-bottom:1px;" alt="help" width="25" height="25" /></span>
        </td>
      </tr>
      <!--- CARD NUMBER FIELD --->

==========================================================

POSSIBLE FIX

card_number: {
  ccnotdefault: function(){ return $('#pay_method').val(); },
  required: true
},

jQuery.validator.addMethod("ccnotdefault", function(value, element, param) {
  // if the element is optional, don't validate 
  return this.optional(element) ||
  // or if the value is equal to the default value
  (value === element.defaultValue || 
  // or, finally, if the cc number is valid
  jQuery.validator.methods.creditcard2.call(this, value, element, param));
}, jQuery.validator.messages.creditcard);

http://www.ihwy.com/labs/downloads/jquery-validate-creditcard-2/jquery.validate.creditcard2-1.0.1.js

Answer 1

I would write a custom rule for this that calls the default credit card rule but also takes into account the default value of the field:

$.validator.addMethod("ccnotdefault", function(value, element) {
    // if the element is optional, don't validate 
    return this.optional(element) ||
       // or if the value is equal to the default value
       (value === element.defaultValue || 
       // or, finally, if the cc number is valid
       $.validator.methods.creditcard.call(this, value, element));
}, $.validator.messages.creditcard);

$(document).ready(function() {
    $("#myform").validate({
        rules: {
            card_number: {
                ccnotdefault: true,
                required: true
            }
        }
    });
});

Example: http://jsbin.com/ejonid/2/