JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div class="container">
    <form>
        <legend>Validation</legend>
        <fieldset>
            <label>
                <span class="label">First Name</span> 
                <input type="text" />
                <span class="error">First Name Required</span>
            </label>
            <label>
                <span class="label">Last Name</span> 
                <input type="text" />
                <span class="error">Last Name Required</span>
            </label>
            <label>
                <span class="label">Select Your Country</span> 
                <select>
                    <option selected>Select</option>
                    <option>India</option>
                    <option>US</option> 
                    <option>UK</option>
                </select>
                <span class="error">Country Required</span>
            </label>
            <label>
                <span class="label">Select Gender</span>
                Male<input name="gender[]" value="male"  type="radio"/> 
                Female<input name="gender[]" value="female" type="radio"/>
                <span class="error">Gender Required</span>
            </label>
            <label>
                <span class="label">Select a Gender</span> 
                Domestic <input value="domestic" name="trade[]" type="checkbox" /> 
                International <input name="trade[]" value="multination" type="checkbox" />
                <span class="error">Business Level Required</span>
            </label>
        </fieldset>
        <input value="submit" type="submit" />
    </form>
</div>

CSS

div.container {
    padding:20px
}

form {
    border:1px dotted gray;
    padding:20px;
}

fieldset{
    border:0;
}

label{
    display:block;
}

label span.label {
    display:inline-block;
    width:45%;
    margin-right:5%;
}

label input{
    border-radius:5px;
    border:1px solid lightgray;
    padding:3px;
    width:45%;
}

span.error{
    color:red;
    text-align:right;
    display:none;
}

JavaScript

(function(){
    
    var calledIt = function (event, params) {

        $.each(params, function(i,element) {
           var prop = element.get(0).type;
           var value = null;
           switch(prop) {
            case "text" :
            case "select-one" :
                value = element.val();
            break;
            case "radio" :
            case "checkbox" :
                var name = element.prop('name');
                value = $("input[name='"+name+"']:checked").val();
            break;
           }
           if(!value) {
                element.focus();
                return false;
           }
        })
    }

    $(document).on('focusInitiate', calledIt);

})();

var Validator = function (form) {
    
    this.form = form,
        this.elements = this.form.find(':input:not(button, input[type=submit])'),
        button = this.form.find('input[type=submit]'),
        that = this,
        this.submitIt = false;
    
    this.form.submit(function(e){
        e.preventDefault();
        var requiredElement = [];
        
        if(that.submitIt) {
            console.log('set a model');
        } else {
            console.log('don\'t set a model')
        }
       
        $.each(this.elements, function(i,element){
            var tagName = String(element.type).toUpperCase();
        
            switch(tagName) {
                case "TEXT" :
                case "TEXTAREA" :
                case "SELECT-ONE" :
                    that.inputHandler({tagName:tagName,element:$(this)});
                    requiredElement.push($(this));
                break;
                case "RADIO"      :
                case "CHECKBOX"   :
                    that.changeHandler({tagName:tagName,element:$(this)});
                    requiredElement.push($(this))
                break;
            }
            return requiredElement;
        })

        $.when.apply($, requiredElement).done(function(){
            $.event.trigger("focusInitiate",...