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>