JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<body>
    <form id="frmTest">
        <label for="txtName">Name:</label>
        <input type="text" id="txtName" name="txtName" placeholder="Enter your name">
        <label for="lstAnswer">Did you enter your name?</label>
        <select id="lstAnswer" name="lstAnswer" data-role="slider">
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
        <br /><br />
        <input type="submit" id="butSubmit" value="Check Test" />
    </form>
</body>

CSS

label.error{ color: red;  }

JavaScript

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});
$("#frmTest").validate({
    messages: {
        txtName: {
            required: "Please enter your name",
        },
        lstAnswer: {
            required: "Please select Yes",
        }        
    },
    rules: {
        txtName: {
            required: true
        },
        lstAnswer: {
            required: true
        }
    }
});