jQuery Validation rule based on select value

Question

I have the following form.

<form id="myform">
    <select id="country" name="country">
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="AU">Australia</option>
        <option value="NZ">New Zealand</option>
        <option value="IE">Ireland</option>
    </select>
    <input type="text" name="zip_code" id="zip-code">
    <input type="submit">
</form>

I want the zip_code field to contain the digits: true rule when the selected country is United States. This is what I have tried based on this code.

$("#myform").validate({
    rules:{
        zip_code: {
            required: true,
            maxlength: 10,
            digits: function(element){
                return $("#country").val() == 'US';
            }
        }
    }
});

EDIT: I was mistaken, this does enable digits validation, but when I change countries, the digits rule doesn't become false

@whoami US should be digits only. The other countries can have both letters and numbers. — No Name
– No Name, Commented Jul 31, 2018 at 15:17

jvk · Accepted Answer · 2018-07-31 16:07:08Z

1

here i notice few thing which you have done wrong, you have given variable instead of id,

   $("#myform").validate({
          rules:{
              zip_code: {
                  required: true,
                  maxlength: function() {
                    if($("#country").val() == 'US'){
                      return 5;
                    }else {
                      return 10;
                    }
                  },
                  digits: {
                  depends: function(element) {
                      return $("#country").val() == 'US';
                    }
                  }
              }
          }
      });

edited Jul 31, 2018 at 16:07

answered Jul 31, 2018 at 15:32

jvk

2,1893 gold badges22 silver badges28 bronze badges

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

2 Comments

No Name Over a year ago

The variable was just a typo. However your answer seems to be working. I will mark it as accepted. I know this wasn't part of the original question but do you know how I could make it so the maxlength is 5 when the country is US, and 10 when it's any other country?

jvk Over a year ago

@BojanSrbinoski, i updated the answer, check it out.

Collectives™ on Stack Overflow

jQuery Validation rule based on select value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related