Completed Validation Example Using my jQuery Plugin

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- <div class="message message-error message-dismissable">
    <div class="message-inner message-tip message-tip-left-top">
        <div title="close this message (or hit Esc)" class="message-close">×</div>
        <div class="message-text" style="padding-right: 35px;"></div>
    </div>
</div>
-->

<b>To see a revised example using boostrap popovers visit Google Drive/Chad/Backups/cert_plugin_example.  But I believe I want to use HTML5 constraint validation instead.</b>
<form style="width:400px;padding:20px;" class="validation-form" role="form">
    <div class="form-group">
        <label for="txtName" class="sr-only">Name</label>
        <input type="text" name="Name" id="txtName" data-name="Full Name" class="form-control required min-5" placeholder="Enter Name" />
    </div>
    <br />
    <div class="form-group">
        <label for="txtPhone" class="sr-only">Phone</label>
        <input type="text" name="Phone" id="txtPhone" class="form-control required phone" placeholder="Enter Phone" />
    </div>
    <br />
    <div class="form-group">
        <table id="tblDemo">
            <thead>
                <tr>
                    <th>OrderID</th>
                    <th>GroupID</th>
                </tr>
                <tr>
                    <th>
                        <input class="mimic-form-control" />
                    </th>
                    <th>
                        <input class="mimic-form-control" />
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>C881044</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>C881045</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>C881046</td>
                    <td>1</td>
                </tr>
                <tr>
        ...

CSS

/* page specific */
 table {
    border: 1px solid #DCDCDC;
    border-collapse: collapse;
}
table td, table th {
    padding:2px;
    border:1px solid #DCDCDC;
}
.form-group.has-error #tblDemo tbody tr {
    border: 1px solid #a94442;
}
.form-group.has-error #tblDemo tbody tr td:first-child {
    border-left:0px;
    border-top:0;
    border-bottom:0;
}
.form-group.has-error #tblDemo tbody tr td:last-child {
    border-right:0px;
    border-top:0;
    border-bottom:0;
}
.form-group.has-error #tblDemo thead tr:last-child th {
    border-bottom:0;
}
/* WORKS TOO */

/*
.form-group.has-error #tblDemo thead tr:last-child th{
    border-bottom-width:0;
}
.form-group.has-error #tblDemo tbody tr:first-child td{
    border-top-width:0;
}
.form-group.has-error #tblDemo tbody tr:last-child td{
    border-bottom-width:0;
}
.form-group.has-error #tblDemo tbody tr td:first-child{
    border-left-width:0;
}
.form-group.has-error #tblDemo tbody tr td:last-child{
    border-right-width:0;
}
.form-group.has-error #tblDemo tbody{
    border: 1px solid #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
*/
 .selected {
    background-color: #B0BED9 !important;
}
/* plugin specific */
 .message-summary-error {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.3em;
    font-size:13px;
    color: #C04848;
    font-weight:bold;
}
.message-summary-success {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.3em;
    font-size:13px;
    color: #5cb85c;
    font-weight:bold;
}
.message-summary-warning {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.3em;
    font-size:13px;
    color: #f0ad4e;
    font-weight:bold;
}
.mimic-form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
   ...

JavaScript

(function ($) {

    $.fn.validate = function (options) {
        var opts = $.extend({}, $.fn.validate.defaults, options);
        var frm = $(this);

        if (isValid()) {
            if (opts.success) {
                opts.success();
            }
        }


        function isValid(solo) {
            if (solo) {
                //solo = $(solo);
                var errObj = solo.closest(".form-group").find(".message-error");
                clearError(errObj, true);
            } else {
                clearAllErrors();
            }

            var tripped = false;


            //processing the observers
            for (var itemLoop in opts.checklist) {

                var item = opts.checklist[itemLoop];
                var el = $(item.control);
                if (solo) {
                    if (el.get(0) != solo.get(0)) {
                        continue;
                    }
                }
                if (!item.validity()) {
                    tripped = true;
                    showError(el, item.message, item.placement);
                }
            };

            var target = (solo ? solo.parent() : frm);
            //I have to go to the parent since the find function doesn't check itself
            //Attempts to use addBack() were not successful.
            //The parent should be form-group in most cases



            //REQUIRED
            target.find(".required").each(function () {
                var el = $(this);
                if (el.closest(".form-group").hasClass("has-error")) {
                    return true;
                }
                if (el.val() == "") {
                    tripped = true;
                    showError(el, getName(el) + " is missing.");
                }
            });

            //NUMERIC
            target.find(".numeric").each(function () {
                var el = $(this);
                if (el.closest(".form-group").hasClass("has-error")) {
                    return true;
       ...