JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form name="state_form" id="state_form" action="#" method="post">
    <div>
        <label>State</label>
        <select id="state" name="state">
            <option value="">Choose</option>
            <option value="act">ACT</option>
            <option value="nsw">NSW</option>
            <option value="nt">NT</option>
            <option value="qld">QLD</option>
            <option value="sa">SA</option>
            <option value="tas">TAS</option>
            <option value="vic">VIC</option>
            <option value="wa">WA</option>
        </select>
    </div>
    <div>
        <input type="submit" />
    </div>
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

#docs {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function () {
    $('#state_form').validate({
        onclick: false,
        rules: {
            state: "required"
        },
        messages: {
            state: {
                required: "The State is required!"
            }
        },
        errorPlacement: function (error, element) {
            alert(error.text());
            alert('Your state is reset');             
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});