0

In following code snippet, I want if user added more row then validation should be implemented on that as well and no two select box of business should have same value.

Names of both select boxes are self explanatory as i need to pass all value to next page.

$(document).ready(function() {
        $(".addmore").on('click',function(e){ 
          var newrow=$('#businessgroup .form-group:first').clone();
          $('#businessgroup').append(newrow);
        });      

    $("#addUserForm").validate({
        rules: {               
            'business_unit[]': {
                required: true,
            },
            'department[]': {
                required: true,
            },
        },
        messages: {             
            'business_unit[]': {
                required: "Please select business unit."
            },
            'department[]': {
                required: "Please select department."
            },
        }
    });      
});
<link href="http://112.196.27.245/bnp/public/css/style.default.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://112.196.27.245/bnp/public/js/jquery.validate.js"></script>
<form id="addUserForm" name="addUserForm">
<div id="businessgroup">
<div class="form-group">
                <select name="business_unit[]">
                    <option value="">Select Business Unit</option>
                    <option value="17">Business Unit 1</option><option value="18">Business Unit 2</option><option value="19">Business Unit 3</option>                   
                </select>
                <select name="department[]">
                    <option value="">Select Department</option>
                  <option value="17">Business Unit 1</option><option value="18">Business Unit 2</option><option value="19">Business Unit 3</option>             
                </select>                   
              </div>
  <div class="col-sm-3"><button type="button" class="btn btn-primary addmore">Add More</button></div>
  </div>      
  <input type="submit" name="addUserBtn" value="Add" class="btn btn-primary">
  </form>
parveen
  • 557
  • 3
  • 13
  • @sparky not getting you.. – parveen Mar 24 '15 at 04:27
  • Oh, never mind, I see your cloning now. You cannot using cloning because you'll be duplicating the `name`. Validation will not work then because you cannot have duplicate `name` attributes. You'll have to assign an index and increment it. See the [question and answer here](http://stackoverflow.com/questions/17632180/jquery-validate-array-input-element-which-is-created-dynamically) – Sparky Mar 24 '15 at 14:48

0 Answers0