JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form name="test">
<div class="clone-group">
<label for="">Form </label>
<div class="row form-group clone">
<div class="col-xs-2">
<input type="text" class="form-control internal" name="option[]" data-rule-required="true" />
</div>
<div class="col-xs-2">
<input type="text" class="form-control external" name="new[]" data-rule-required="true" />
</div>
<div class="col-xs-2">
<input type="text" class="form-control internal" name="new1[]" data-rule-required="true" />
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-danger addButton">+</button>
</div>
</div>
</div>
<button type="submit">Test</button>
</form>
CSS
.invalid {
border: 1px solid red !important
}
label.invalid {
display: none !important;
}
.green {
border:1px solid green;
}
JavaScript
/*!
* jQuery Validation Plugin v1.13.1-pre
*
* http://jqueryvalidation.org/
*
* Copyright (c) 2014 Jörn Zaefferer
* Released under the MIT license
*/
(function (factory) {
if (typeof define === "function" && define.amd) {
define(["jquery"], factory);
} else {
factory(jQuery);
}
}(function ($) {
$.extend($.fn, {
// http://jqueryvalidation.org/validate/
validate: function (options) {
// if nothing is selected, return nothing; can't chain anyway
if (!this.length) {
if (options && options.debug && window.console) {
console.warn("Nothing selected, can't validate, returning nothing.");
}
return;
}
// check if a validator for this form was already created
var validator = $.data(this[0], "validator");
if (validator) {
return validator;
}
// Add novalidate tag if HTML5.
this.attr("novalidate", "novalidate");
validator = new $.validator(options, this[0]);
$.data(this[0], "validator", validator);
if (validator.settings.onsubmit) {
this.validateDelegate(":submit", "click", function (event) {
if (validator.settings.submitHandler) {
validator.submitButton = event.target;
}
// allow suppressing validation by adding a cancel class to the submit button
if ($(event.target).hasClass("cancel")) {
validator.cancelSubmit = true;
}
// allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
if ($(event.target).attr("formnovalidate") !== undefined) {
validator.cancelSubmit = true;
}
});
...