Dynamic Form Validation

This is a test for getting a dynamic form element working and validated.

by Shawn Wood

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
<div class="container">
<form method="post" method="post" class="form-horizontal" id="contactForm">
    <div>
    <div class="row phoneTitleRow">
        <div class="col-xs-3">
            <label>Phone Number</label>
        </div>
        <div class="col-xs-2">
            <label>Extension</label>
        </div>
        <div class="col-xs-3">
            <label>Phone Type</label>
        </div>
        <div class="col-xs-3">
            <label>Phone Country</label>
        </div>
        <div class="col-xs-1">
            <label>Actions</label>
        </div>
    </div>
    <div class="phoneListWrap" class="col-xs-12">
        <div class="phoneRow formRow row">
            <div class="col-xs-3 formCell">
                <div class="form-group ">
                    <div class="input-group">
                        <input type="text" class="form-control phoneNumber phoneList0" name="phoneList.0.phoneNumber" value=""  data-rule-phoneNumber="true" data-rule-depends="true" depends-on=".phoneExtension0"  />
                    </div>
                </div>
            </div>
            <div class="col-xs-2 formCell">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control phoneExtension0 phoneList0" name="phoneList.0.phoneExtension" value="" data-rule-phoneRow='true' />
                    </div>
                </div>
            </div>
            <div class="col-xs-3...

CSS

.close{
  cursor:pointer;
 }
form .form-control-feedback {
		    pointer-events: auto;
}
form .form-control-feedback:hover {
	cursor: pointer;
}
form .inputGroupContainer .form-control-feedback,
form .selectContainer .form-control-feedback {
	top: 0;
	right: -15px;
}
form .fv-icon {
	top:20px;
			right:20px;
			width:0px;
			height:0px;
			line-height:0px;
    z-index:3; position:absolute;
}
.phoneList{
    border-top:1px solid #CDCDCD;
    border-bottom:1px solid #D9D9D9;
}
.phoneRow {
     height:auto;
    width:auto;
    border-right:1px solid #CDCDCD;
    border-left:1px solid #D9D9D9;
}

.formRow:nth-of-type(odd)  {
background-color: #EFEFEF;
}
.formCell {
    padding-top:15px;
}

JavaScript

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".phoneListWrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var htmlString      = '';
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            htmlString = '<div class="phoneRow formRow row">'+
                '<div class="col-xs-3 formCell"><div class="form-group"><div class="input-group">'+
                '<input col-xs-12 type="text" class="form-control phoneNumber phoneList'+ x +'" name="phoneList.'+ x +'.phoneNumber" value="" data-rule-phoneNumber="true" data-rule-depends="true" depends-on=".phoneExtension'+ x +'" />' +
                '</div></div></div>'+
                '<div class="col-xs-2 formCell"><div class="form-group"><div class="input-group">'+
                '<input type="text" class="form-control phoneExtension'+ x +' phoneList'+ x +'" name="phoneList.'+ x +'.phoneExtension" value=""  />'+
                '</div></div></div>'+
                '<div class="col-xs-3 formCell"><div class="form-group required"><div class="input-group">'+
                '<select name="phoneList.'+ x +'.phoneTypeId" class="form-control phoneType phoneList'+ x +'" required>'+
                '<option value="">Select Phone Type</option><option value="1">Comm</option>'+
                '<option value="2">DSN</option><option value="3">Secure</option></select>'+
                '</div></div></div>'+
                '<div class="col-xs-3 formCell"><div class="form-group required"><div class="input-group">'+
                '<select name="phoneList.'+ x +'.phoneCountryId" class="form-control phoneCountry phoneList'+ x +'">'+
                '<option value="">Select Phone Country</option>'+
                '<option value="1">United...