JSFiddle - React, Tailwind, and code Playground

by Mabuti

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="http://cdnjs.com/#jquery-backstretch"></script>
<div>
    <div class="unique-wrapper applicants-information home">
        	<h1>Applicant Information</h1>

        <div class="named-insureds">
            <div class="collection">
                <div class="named-insured   primary" data-id="6743">
                    <form novalidate="novalidate" method="POST">
                        <div class="row-fluid divider-top">
                            <div class="span12">
                                <input name="namedInsureds[0].coreIdentifier" value="285135" type="hidden" />
                                <input name="namedInsureds[0].namedInsuredId" value="6743" type="hidden" />
                                <p class="remove pull-right hidden-on-primary hidden-on-pending-removal">
                                    <button class="btn remove" type="button">Remove</button>
                                </p>
                                <p class="remove pull-right hidden-on-primary visible-on-pending-removal">
                                    <button class="btn undo-remove">Undo</button>
                                </p>
                                	<h3 class="visible-on-primary">Named Insured (Mail Recipient)</h3>

                                	<h3 class="hidden-on-primary">Named Insured</h3>

                                <div style="display:none;" class="validation-errors alert alert-error"><strong>All required fields must be filled out with valid data.</strong>

                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div class="input-group">
             ...

CSS

.input-group.error label,
label.error,
span.error,
strong.error {
  color: #c23223;
}

JavaScript

(function ($) {

    var validationOptions = {
        ignore: "input[type='text']:hidden",
        errorContainer: ".validation-errors",
        errorPlacement: function (errorLabel, element) {
            var label = $(element).closest(".input-group").find("label");
            if (label.length == 0) {
                errorLabel.addClass("error").insertAfter(element);
            }
        },
        errorClass: 'nothing',
        highlight: function (element, errorClass, validClass) {
            var label = $(element).closest(".input-group").find("label");
            label.removeClass(validClass).addClass("error");
        },
        unhighlight: function (element, errorClass, validClass) {
            var label = $(element).closest(".input-group").find("label");
            label.removeClass("error").addClass(validClass);
        },
        invalidHandler: function () {}
    };
    
            var rules = {};
            rules["namedInsureds[" + this.model.index + "].electronicSignature.pin"] = {
                rangelength: [4, 25],
                required: true
            };
            rules["namedInsureds[" + this.model.index + "].email"] = {
                required: function (el) {
                    return true; //$(el).parents(".named-insured").find(".esignature-checkbox").is(":checked");
                }
            };
            rules["namedInsureds[" + this.model.index + "].ssn"] = {
                unique: {
                    param: "INPUT.ssn"
                }
            };
            dom.find("form").validate($.extend({
                rules: rules
            }, validationOptions));

            this.setElement(dom);
            if (this.model.primary) {
                this.$el.addClass("primary");
                this.$el.find("input[name=isPrimary]").prop("checked", true);
                this.setRelationToSelf(this.$el.find(".relation"));
            }

            this.$('INPUT.ssn').mask('999-99-9999');
           ...