JQUERY validation based on another field

forms, html, jquery, validation

Solution

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.

Problem

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> ```

Original source