JQUERY validation based on another field

Question

I am trying to validate the phone number field based on the country selected. Eg. SG will be 8 digits and USA will be 10 digits. Anyone has any idea how I can go about doing it using Jquery?

Here is my code(FORM):

    <form id="form" action="http://localhost/formsubmitted.php" method="post">
    <div>
        <input type="text" name="name" id="name" placeholder="Name" required />
    </div>
    <div>
        <select class="dropdown" id="country" name="gender" required >
        <option value="" disabled selected>Country</option>
        <option value="sg">Singapore</option>
        <option value="usa">United States of America</option>
        </select>
    </div>
    <div>
        <input type="text" name="ssid" id="ssid" placeholder="SSID" required />
    </div>
    <div>
        <input type="text" name="phone" id="phone" placeholder="Phone Number" required />
    </div>
    <input id="submit" class="button" type="submit" value="submit"/>
</form>

Here is my code(JQUERY VALIDATION):

<script type="text/javascript">
    $(document).ready(function() {
    $('#submit').one('click', function() {
    $('#form').validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            maxlength: 100,
            letterspaces: true
        },
        ssid: {
            required: true,
            minlength: 8,
            maxlength: 9,
            nowhitespace: true
        },
        country: {
            required: true,
        },
        phone: {
            required: true,
            minlength: 8,
            maxlength: 11,
            digits: true
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Name should be more than 2 characters",
            maxlength: "Name should be less than 100 characters",
            letterspaces: "Name should contain only letters and spaces"
            },
    country:{
    required: "Please select your country"
    },
    ssid: {
            required: "Please enter your SSID",
            minlength: "SSID should be more than 8 characters",
            maxlength: "SSID should be less than 9 characters",
            nowhitespace: "SSID should not have any spaces"
            },
    phone: {
            required: "Please enter your mobile number",
            minlength: "Mobile number should be more than 8 characters",
            maxlength: "Mobile number should be less than 11 characters",
            digits: "Mobile number should contain only digits"
            },
    },
    });

    $("#submit").click(function(){
        $("#form").submit();
        if (validationIsTrue()) {
          return true;
        }
        else {
            return false;
        }
    });
    });
    });
</script>

Answer 1

I have created a Demo for you validation depend on another field with following code:

$("#contact").validate({
        rules: {
            "name-contact": {
                required: true
            },
            "test":{
                required:true
            },
            "phone":{
                required:true,
                minlength: function(element){
                    if($("#test").val()==1){
                        return 3;
                    }
                    else if($("#test").val()==2){
                        return 5;
                    }
                    else{
                        return 1;
                    }
                }
            }
        },
        messages: {
            "name-contact": {
                required: "Please, enter a name"
            },
             "test": {
                required: "Please, enter"
            },
            "phone":{
                minlength:"minlenght"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            alert($("#test").val());
            return false; // for demo
        }
    });

You can simply use this logic with your code. Hope this'll help you.

Answer 2

Add this code with your jQuery Code.

jQuery('#country').change(function(){
    var selected = jQuery(this).find(":selected").val();
    if(selected == 'sg')
    {
        jQuery('#phone').attr('maxlength', '8');
    } else if(selected == 'usa') {
        jQuery('#phone').attr('maxlength', '10');
    }
});

Hope this will help you...