JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form action="#" class="send_form" id="online_booking_form" method="POST">
    <div class="user_bf_input">
        <label for="fname">*First Name:</label>
        <input name="fname" type="text" id="fname" size="20" />
    </div>
    <div class="user_bf_input">
        <label for="lname">*Last Name:</label>
        <input name="lname" type="text" id="lname" size="20" />
    </div>
    <div class="user_bf_input">
        <label for="cn_home">*Contact Number (Home/Work):</label>
        <input name="cn_home" type="text" id="cn_home" class="validateit" size="15" />
    </div>
    <div class="user_bf_input">
        <label for="cn_mobile">*Contact Number (Mobile):</label>
        <input name="cn_mobile" type="text" id="cn_mobile" size="15" class="validateit" />
    </div>
    <div class="send_row send_submitforgotuser">
        <input type="submit" value="Submit" />
    </div>
</form>

JavaScript

$(document).ready(function () {

    $("#online_booking_form").validate({
        debug: true,
        invalidHandler: function (event, validator) {
            // 'this' refers to the form
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        groups: {
            names: "cn_home cn_mobile"
        },
        rules: {
            fname: {
                required: true,
                minlength: 3
            },
            lname: {
                required: true,
                minlength: 3
            },
            postcode: {
                required: true,
                minlength: 4
            },
            cn_home: {
                require_from_group: [1, ".validateit"]
            },
            cn_mobile: {
                require_from_group: [1, ".validateit"]
            },
            dob: "required",
            payment_method: "required",
            cc_type: "required",
            cc_number: {
                required: true,
                digits: true,
                minlength: 16,
                maxlength: 16
            },
            cvc_number: "required",
            other_source: "required",
            terms_of_booking: "required"
        }
    });
    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either Home/Work or Mobile No fields.")
    });
});