JSFiddle - React, Tailwind, and code Playground

by vi161

HTML

<div class='form-field-box even' id="one_field_box">
    <div class='form-display-as-box' id="one_display_as_box">one<span class='required'>*</span> :</div>
    <select class="validateMe" id='one'
    name='one' data-placeholder="Select one" class="chzn-select" style="width:300px;"
    tabindex="4">
        <option value='0'></option>
        <option value='Corto' selected='selected'>Corto</option>
        <option value='Largo'>Largo</option>
    </select>
    <select class="validateMe" id='two' name='two' data-placeholder="Select one"
    class="chzn-select" style="width:300px;" tabindex="4">
        <option value='0'></option>
        <option value='Corto' selected='selected'>Corto</option>
        <option value='Largo'>Largo</option>
    </select>
    <select class="validateMe" id='three' name='three' data-placeholder="Select one"
    class="chzn-select" style="width:300px;" tabindex="4">
        <option value='0'></option>
        <option value='Corto' selected='selected'>Corto</option>
        <option value='Largo'>Largo</option>
    </select>
    <div class="form-error">
      <p class="er">
        ERROR!!
      </p>
    </div>
    <div class='clear'></div>
</div>
<p>Select blank option to see the error:
    <button id="validate">VALIDATE</button>
</p>

CSS

.form-error {
    color: red;
}

JavaScript

function validate(id, error) {
    var obj = $('#' + id);
    if (obj.val() === '0' || obj.val() === '') {
       /*  obj.parent().parent().find('.form-error').append('<p>' + error + '</p>'); */
       $(".er").css("color","yellow")
        /* return true */;
    }
    return false;
}

$('#validate').click(function () {
    $('.form-error').html('');    // clear existing errors
    $('select.validateMe').each(function () {
        var select = $(this);
        var id = $(this).attr('id');    // get id of each select
        validate(id, 'error in field ');
    });
});