JQuery Validation Ignore Form Fields With Default Form Field Values

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

What are you trying to accomplish with the creditcardtypes validation method? Also I don't think that it'll run properly unless you use addMethod. Is there any way you could share your full form HTML? — Andrew Whitaker
– Andrew Whitaker, Commented Jun 12, 2012 at 18:47
creditcardtypes is part of the plugins default additional methods. All it does is validate a form select box (Visa, Mastercard, AMEX, Discover) against the credit card number entered. It makes sure that if the user selects visa, a valid visa number was entered, and if not, alerts the user. — goxmedia
– goxmedia, Commented Jun 12, 2012 at 19:02
I could probably just take that portion out, but if I would prefer to leave it in since that's what my action page currently expects. — goxmedia
– goxmedia, Commented Jun 12, 2012 at 19:03
Andrew, I think I fixed it. Take a look at my adds above and let me know if that looks good to you. It seems to work on my end. I added a param element to the call, and to your addMethod, then pointed that to the updated creditcard2 method (link also given above).Please let me know your thoughts. Thanks. — goxmedia
– goxmedia, Commented Jun 13, 2012 at 3:11

Andrew Whitaker · Accepted Answer · 2012-06-12 15:20:06Z

2

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/

answered Jun 12, 2012 at 15:20

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goxmedia Over a year ago

Hi Andrew, I added another comment to my original post. We are running into a glitch with the creditcardtype validation. Thanks again!

Collectives™ on Stack Overflow

JQuery Validation Ignore Form Fields With Default Form Field Values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related