JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<li class="row questionWrap">
    <div class="col-msm-12  col-tsm-6">
        
        <div class="question">
            <label class="questionTitle">What is your title?</label>
        </div>
    </div>

    <div class="col-msm-12 col-tsm-6">
        <fieldset>
            <legend class="visually-hidden">What is your title?</legend>
            <div class="selectWrapper">
                <select data-val="true" data-val-required="Please select your title" id="Enquiry_Customer_Title" name="Enquiry.Customer.Title" aria-describedby="Enquiry_Customer_Title-error" aria-invalid="true"><option value="">Please select...</option>
<option value="100">Mr</option>
<option value="103">Miss</option>
<option value="101">Mrs</option>
<option value="102">Ms</option>
</select>
            </div>
        </fieldset>
    </div>
</li>

JavaScript

$.validator.setDefaults({
    highlight: function (e) {
        $(e).closest('.questionWrap').addClass('error');
        $(e).closest('.questionWrap').find('.questionTitle').removeClass('questionTitle__valid');
    },
    unhighlight: function (e) {
        var qWrap = $(e).closest('.questionWrap');
        $(e).closest('.questionWrap').find('.questionTitle').addClass('questionTitle__valid');
        if (qWrap.find('.field-validation-error').length == 0) {
            $(e).closest('.questionWrap').removeClass("error");   
        }
    },
    onclick: function (e) {
        this.element(e);
    },
    ignore: ':hidden:not(.validateHidden)'
});

$("#Enquiry_Customer_Title").change(function () {
        $("#Enquiry_Customer_Title").valid();
    });