CODEWITHSUNDEEP
jqueryformscss-selectorsjquery-validate
user1032531
user1032531

Reputation: 26281

jQuery-Validate require_from_group and selecting by name

As shown in the jqueryvalidation require_from_group-method example, one can select a group by using a class.

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

I also found it is possible to select by ID.

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    home_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    work_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    }
  }
});

Is it possible to select by name? The following two attempts result in error.

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    home_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    work_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    }
  }
});

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    home_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    work_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    }
  }
});

Upvotes: 1

Views: 523

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

Selector with attrib works with = not dot : so you should only replace the : by =

see below snippet :

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "mobile_phone": {
                require_from_group: [1, "[name= mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "home_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "work_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            }
        },submitHandler: function (form) { // for demo
            if($(form).valid() ) alert("form valide");
            return false;  //form.submit();
        }
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">


    <label for="name">mobile phone :</label>
    <input class="phone-group" type="text" name="mobile_phone" id="mobile_phone" /><br><br>
    
    
    <label for="name">home phone :</label>
    <input class="phone-group" type="text" name="home_phone" id="home_phone" /><br><br>
    
    
    <label for="name">work phone :</label>
    <input class="phone-group" type="text" name="work_phone" id="work_phone" /><br><br>
    <button type="submit">Submit</button>
</form>

Upvotes: 1

Related Questions