JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<form method="post" action="/form/full/save">
    <dl class="zend_form_dojo">
<dt id="formelement_71_Month-label"><label for="formelement_71_Month" class="required">* Date of Birth</label></dt>

        <select name="formelement_71_Month" id="formelement_71_Month">
            <option value="0" label="Month">Month</option>
            <option value="1" label="January">January</option>
            <option value="2" label="February">February</option>
            <option value="3" label="March">March</option>
            <option value="4" label="April">April</option>
            <option value="5" label="May">May</option>
            <option value="6" label="June">June</option>
            <option value="7" label="July">July</option>
            <option value="8" label="August">August</option>
            <option value="9" label="September">September</option>
            <option value="10" label="October">October</option>
            <option value="11" label="November">November</option>
            <option value="12" label="December">December</option>
        </select>
        <select name="formelement_71_Date" id="formelement_71_Date">
            <option value="0" label="Date">Date</option>
            <option value="1" label="1">1</option>
            <option value="2" label="2">2</option>
            <option value="3" label="3">3</option>
            <option value="4" label="4">4</option>
            <option value="5" label="5">5</option>
            <option value="6" label="6">6</option>
            <option value="7" label="7">7</option>
            <option value="8" label="8">8</option>
            <option value="9" label="9">9</option>
            <option value="10" label="10">10</option>
            <option value="11" label="11">11</option>
            <option value="12" label="12">12</option>
            <option value="13" label="13">13</option>
            <option value="14" label="14">14</option>
            <option value="15" label="15">15</option>
      ...

JavaScript

$(document).ready(function () {
    $('.zend_form_dojo select').each(function () {
            if (isDOBRequired(this)) {
                if ($(this).val() == '0') {
                    $(this).parent().css('max-width', '21px');
                    $(this).parent().css('border', '1px red solid');
                    valid = false;
                } else {
                    $(this).parent().css('border', 'none');
                }
            }
    });

    function isDOBRequired(element) {
        if ($(element).prev('dt').children().length) {
            //this is for DOB dropdown because they're not in a dd tag
            if ($(element).prev('dt').children().html().substring(0, 2) == '* ') {
                return true;
            }
            return false;
        }
    }
});