JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://linux.aress.net/smudev/js/jquery.validate.js"></script>
<form action="/smudev/CourseCategories/add" autocomplete="off" id="CourseCategoryAddForm" method="post" accept-charset="utf-8" novalidate="novalidate">        
        <!--Div structure-->
        <section class="AddNewForm">
            
            
            <section class="formField fullwidth">
                <label>
                    Department:			
					<span class="starRed"> *</span>									
                </label>
                <section class="inputOuter width160">
                    <div class="input select"><select name="data[CourseCategory][department_id]" id="CourseCategoryDepartmentId" class="errorjQuery">
<option value="">(choose one)</option>
<option value="4">Arts</option>
<option value="5">Commerce</option>
<option value="1">Science</option>
<option value="3">Sports</option>
</select></div>	
                </section>
            </section>
            
            
            
            <section class="formField formBTN">
                    <div class="submit"><input name="submit" class="grayBTN" title="" alt="Submit" type="submit" value="Save"></div><button type="button" onclick="redirectFun()" class="grayBTN">Cancel</button>
            </section>            
                        
    	</section></form>

JavaScript

jQuery.validator.addMethod("notEmptyPlaceholder", function(value, element) 
{
	
	if(value == 'Enter category name') 
	{
		//Here validation is made false ,Dont submit form
		return false;
	}
	else
	{
		return true;
	}

},'');


jQuery.validator.addMethod("validEmail", function(value, element) 
{
	if(value == '') 
		return true;
	var temp1;
	temp1 = true;
	var ind = value.indexOf('@');
	var str2=value.substr(ind+1);
	var str3=str2.substr(0,str2.indexOf('.'));
	if(str3.lastIndexOf('-')==(str3.length-1)||(str3.indexOf('-')!=str3.lastIndexOf('-')))
		return false;
	var str1=value.substr(0,ind);
	if((str1.lastIndexOf('_')==(str1.length-1))||(str1.lastIndexOf('.')==(str1.length-1))||(str1.lastIndexOf('-')==(str1.length-1)))
		return false;
	str = /(^[a-zA-Z0-9]+[\._-]{0,1})+([a-zA-Z0-9]+[_]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
	temp1 = str.test(value);
	return temp1;
}, "Please enter valid email.");

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z\s]*$/i.test(value);
}, "Letters only please"); 

jQuery.validator.addMethod("onlySomeSpecialChars", function(value, element) {
  return this.optional(element) || /^[a-z0-9\s&(),.":]*$/i.test(value);
}, "Allowed special characters &(),.\":"); 
	
jQuery(document).ready(function(){
// validate add Category form when it is submitted
	jQuery("#CourseCategoryAddForm").validate({
		errorElement: 'div',
		 errorClass:'errorjQuery',		
		rules: {
		
			'data[CourseCategory][category_name]': {
				required: true,
				notEmptyPlaceholder: true,
				onlySomeSpecialChars: true
				
			},
			'data[CourseCategory][department_id]': {
				required: true
			}	
			
		},
		messages: {
			
			'data[CourseCategory][category_name]': {
				required: "Please enter category name."	,
				notEmptyPlaceholder: "Please enter category name."
			},
			'data[CourseCategory][department_id]': {
				required: "Please select department."	
			}	
			
		},
		errorPlacement:...