jQuery Validation – check input value when checkbox checked

Question

I've got an input field for a phone number with the option for SMS updates. I want to check that when the SMS checkbox is checked that the number is a mobile number. I've got the regex working, and this is validating, but have got the 'mobile require' error showing even when then check box isn't checked.

$.validator.addMethod(
      "regex",
      function(value, element, regexp) {
        if($('#receive_sms_updates').is(':checked')) {
          var check = false;
          var re = new RegExp(regexp);
          return this.optional(element) || re.test(value);
        } 
      }, "Mobile Required"
    );


    $("form#patient-detials").validate({
      rules: {
        'patient[person_attributes][phone_mobile]': {
          maxlength: 10,
          minlength: 10,
          digits: true,
          regex: "^04[0-9]{8}" 
        }
      }
    });

Andrew Whitaker · Accepted Answer · 2011-12-13 03:34:54Z

2

Update (from your comment below).

You aren't returning true from your custom rule if the if isn't entered, which technically results in undefined being returned to the caller (which is a falsey value). Update your rule as follows:

$.validator.addMethod("regex", function(value, element, regexp) {
    if ($('#receive_sms_updates').is(':checked')) {
        var check = false;
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    }
    return true;
}, "Mobile Required");

Leaving this part around because it might be useful to someone else:

I would update your validate call and rule as follows:

$.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
}, "Mobile Required");

$("form#patient-detials").validate({
    rules: {
        'patient[person_attributes][phone_mobile]': {
            maxlength: 10,
            minlength: 10,
            digits: true,
            regex: "^04[0-9]{8}",
            required: "#receive_sms_updates:checked"
        }
    }
});

As you can see, the required property takes a "dependency-expression" which is used to determine whether or not the mobile field is required (based on whether or not #receive_sms_updates is checked).

Here's an example: http://jsfiddle.net/andrewwhitaker/ED6cX/

To take it just one small step further, I would recommend removing the "Mobile Required" method from the rule itself (you want a re-usable regex rule after all), and place it on the messages property on your validate call. Something like:

$.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
});

$("form#patient-detials").validate({
    rules: {
        'patient[person_attributes][phone_mobile]': {
            maxlength: 10,
            minlength: 10,
            digits: true,
            regex: "^04[0-9]{8}",
            required: "#receive_sms_updates:checked"
        }
    },
    messages: {
        'patient[person_attributes][phone_mobile]': {
            required: "Mobile Required",
            regex: "Please enter a valid mobile number"
        }
    }
});

Example: http://jsfiddle.net/andrewwhitaker/5BVCK/

This way you aren't restricting your validation rule (which is generic enough that it could apply to other fields) with a particular form.

edited Dec 13, 2011 at 3:34

answered Dec 13, 2011 at 2:58

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

2 Comments

Aaron Moodie Over a year ago

Thanks Andrew. the first three rules are now only applying when the checkbox is ticked, and the form can be submitted empty. I was still wanting it to require a 10 digit number by default, and only require a number starting with 04 if #receive_sms_updates is checked.

Andrew Whitaker Over a year ago

@AaronMoodie: Ah, I see. In that case I think you were just missing a single line from your custom rule. Please see my updated answer.

Collectives™ on Stack Overflow

jQuery Validation – check input value when checkbox checked

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related