Adding fields

http://stackoverflow.com/q/33853613/312208

by ryleyb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<form>
    <div>Name:
        <input name="name_ct[]" id="id_ct1" type="text" class="form-control" placeholder="Add Variant 1 Name">
    </div>
    <input type="button" value="Add Variant" />
    <input type="submit" />
</form>

CSS

.error {
    color: red;
}

JavaScript

$("form").validate({
    ignore: '',
    rules: {
        "name_ct[]": {
            required:true
        }
    },
    submitHandler: function () {
        //you can add code here to recombine the variants into one value if you like, before doing a $.post
        alert('successful submit');
        return false;
    }
});

var j = 2;
$('input[type="button"]').click(function () {
    $('form div').append('<p><input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');
    $('#id_ct' + j).rules('add', {
        required: true
    });
    j++;
});