JSFiddle - React, Tailwind, and code Playground

by mhctoledo

HTML

<div style="width:450px">
    <div style="float:left">
        <form id="eg" action="/">
            <table>
                <tr>
                    <td>
                        <label>Name:</label>
                    </td>
                    <td>
                        <input type="text" id="name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Surname:</label>
                    </td>
                    <td>
                        <input type="text" id="surname" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Email:</label>
                    </td>
                    <td>
                        <input type="text" id="email" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Number:</label>
                    </td>
                    <td>
                        <input type="text" id="number" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Age:</label>
                    </td>
                    <td>
                        <input type="text" id="age" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Comment:</label>
                    </td>
                    <td>
                        <input type="text" id="comment" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Password</label>
                    </td>
                    <td>
                        <input type="password" id="pwd" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Confirm Password</label>
                    </td>
                ...

CSS

.showerror {
    display:block;
}
.noshowerror {
    display:none;
}
.remerr {
    display:none;
}
.redborder {
    border:#F00 solid 1px;
    background-color:yellow;
}
.greenborder {
    border:#0F3 solid 1px;
    background-color:#6F6;
}

JavaScript

$(document).ready(function () {
    if ($("#name").val('')) {
        $("#name").val('Name Please');
    }
    $('#name').focus(function () {
        if ($('#name').val() == 'Name Please') {
            $('#name').val("");
        }
    });
    $('#name').blur(function () {
        var nameRegex = /^[A-Za-z]+$/;
        // var fname = document.getElementById("name").value;
        var fname = $("#name").val();
        //alert(nameRegex.test(fname));
        if (!(nameRegex.test(fname))) {
            $("#name").removeClass('greenborder').addClass('redborder');
        } else if (fname == " ") {
            $("#name").removeClass('greenborder').addClass('redborder');
        } else {
            $("#name").removeClass('redborder').addClass('greenborder');
            return false;
        }
    });
    
    $("#number").blur(function(){
        var numero = $(this).val();
        console.log(numero);
    });

});