JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<h1>Form Validation Example</h1>

<form id='getCircleTspForm' name='registerForm' method='post' action=''>
    <p>Name:
        <input type='text' name='xyz' id='x4z' class='required' />
    </p>
    <input type='submit' name='Submit' value='Submit' />
</form>

CSS

.error {
    font: normal 10px arial;
    padding: 3px;
    margin: 3px;
    background-color: #ffc;
    border: 1px solid #c00;
}
body {
    font-size:x-large;
    background:#CCC;
}
h1 {
    margin-bottom:20px;
}
form {
    padding:50px;
}

JavaScript

$('#getCircleTspForm').validate({
    rules: {
        xyz: {
            required: true
        }
    },
    messages: {

        xyz: {
            required: 'Enter your name'
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});