JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<form id="formx" name="formx">
<p>&nbsp;</p>
<table>
    <tr>
    <td>
        <select name="SellerDropDownList" id="SellerDropDownList" class="chosen-select" required >
	<option value="-1">Select an option</option>
	<option value="1">option one</option>
	<option value="2">option two</option>
	<option value="3">option three</option>
	<option value="4">option four</option>

         </select>

        </td>
    </tr>  
</table>
    <input id="text1" name="text1" type="text" value="" />
    <input type="button" value="validate" onclick="return $('#formx').valid()"/>
</form>

CSS

.error{
    color:red !important;
}

JavaScript

var config = {
        '.chosen-select': {},
        '.chosen-select-no-results': { no_results_text: 'nothing found!' }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }

$("#formx").validate({
        rules: {
            SellerDropDownList: {
                required: {
                    depends: function (element) {
                        return $("#SellerDropDownList").val() == "-1";
                    }
                }
            },
            text1: {
                required: true,
                minlength: 8
            }
        },
        errorElement: "span",
        wrapper: "span",  // a wrapper around the error message
        errorPlacement: function (error, element) {
            offset = element.offset();
            error.insertAfter(element)
            error.addClass('error');  // add a class to the wrapper

        },
        onsubmit: false
    });