JSFiddle - React, Tailwind, and code Playground

by Artur Filipiak

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form action="forms/ticket/" method="post" id="ticketForm">
    <div class="container sub-page ticketForm">
        	<h2>Ticket Support</h2>

        <p>We understand you need help with our products at times, by completing the steps below you are able to provide us with all the information we need to get you on your way faster than ever before. Once you complete your ticket, you will receive a response from one of our support techs in 30 minutes or less.</p>
        <hr/>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-success">
                <div class="panel-heading" role="tab" id="generalHeading">
                    	<h4 class="panel-title">
	        			General
	      			</h4>

                </div>
                <div id="generalInfo" class="panel-collapse collapse in" role="tabpanel">
                    <div class="panel-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-xs-2">Name</label>
                                <div class="col-xs-10">
                                    <input type="text" name="name" id="name" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-2">E-mail</label>
                                <div class="col-xs-10">
                                    <input type="text" name="email" id="email" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-2">Phone Number</label>
                               ...

JavaScript

$("#ticketForm").validate({
    ignore: false,
    errorClass: "error text-warning",
    validClass: "success text-success",
    highlight: function (element, errorClass) {
        //alert('em');
       // $(element).fadeOut(function () {
           // $(element).fadeIn();
        //});
    },
    rules: {
        name: "required",
        email: {
            required: true,
            email: true,
        },
    },
    submitHandler: function (form) {
         alert('Form Submitted');
    },
    invalidHandler: function(e,validator) {
        for (var i=0;i<validator.errorList.length;i++){   
            $(validator.errorList[i].element).parents('.panel-collapse.collapse').collapse('show');
        }
    }
});