JSFiddle - React, Tailwind, and code Playground

by Jaikrat Tariyal

HTML

<form name="test1" id="test1" method="post">
    <label for="text1">My text</label>
    <input type="text" id="text1" name="text1" />
    <br/>
    <label for="text1">My Dropdown</label>
    <select id="rm" name="rm" title="RM">
        <option value="">Select</option>
        <option value="Hello">Hello</option>
    </select><br/>
    <button type="submit">submit</button>
</form>

CSS

label.error{
    color:red;
}

	.validationError {
	  -moz-box-shadow: 0 0 5px #51cbee;
	  -webkit-box-shadow: 0 0 5px #51cbee;
	  box-shadow: 0 0 5px #51cbee;
	  padding: 3px 0px 3px 3px;
	  margin: 5px 1px 3px 0px;
	  border: 1px solid red;
	}

JavaScript

$("button").click(function(event){
    $("#test1").submit();    
});

$("#test1").validate({
    onclick:false,
    rules: {
        text1: {
            required: function(){
                return true;
            }
        },
        rm: {
            required: function(){
                return true;
            }
        }
    },
    highlight: function (element) {	
        alert(1);
	    $(element).addClass('validationError');
    },	 
    unhighlight: function(element) {
        $(element).removeClass('validationError');		        	
    },	
    messages:{
    }
});