JSFiddle - React, Tailwind, and code Playground

by King Shrestha

HTML

<form id="signup_form">
<table>
    <tr>
        <td>First Name:</td>
        <td>
            <input class="input fname name" type="text" maxlength="30" required />
        </td>
        <td class="error error1"></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td>
            <input class="input lname name" type="text" maxlength="30" required />
        </td>
        <td class="error error2"></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input class="input pass1 pass" maxlength="100" type="password" required /></td>
        <td class="error error3"></td>
    </tr>
    <tr>
        <td>Password (again):</td>
        <td><input class="input pass2 pass" type="password" maxlength="100" required /></td>
        <td class="error error4"></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input class="input email email1" type="email" maxlength="250" required /></td>
        <td class="error error5"></td>
    </tr>
    <tr>
        <td>Email (again):</td>
        <td><input class="input email email2" type="email" maxlength="250" required /></td>
        <td class="error error6"></td>
    </tr>
</table><br />
<input class="signup" type="submit" value="Signup" />
</form>

CSS

body {
    font-family: Arial;
}
.input {
    border: 1px solid #444;
    height: 20px; width: 200px;
    border-radius: 4px;
}
.valid {
	border-color: #0F0 !important;
}
.invalid {
	border-color: #F00 !important;
}
.error {
    font-size: 12px; color: #F00;
}

JavaScript

$('.name').on('input', function() {
    var invalid = false;
    var name_valid = false;
        $(this).each(function() {
            if ($(this).val().length < 3) { // charecter length
                invalid = true;
            }
        });

    if (invalid) {
        $(this).addClass("invalid").removeClass("valid");
        if ($(this).hasClass('fname')) {
            $('.error1').html('Requires 3 or more charecters');
        } else {
            $('.error2').html('Requires 3 or more charecters');
        }
        $fname_valid = false;
	} else if ($('.fname').val() == $('.lname').val()) {
        $(this).addClass("invalid").removeClass("valid");
        if ($(this).hasClass('fname')) {
            $('.error1').html('Oh come on! Your firstname & lastname cant match :P');
        } else {
            $('.error2').html('Oh come on! Your firstname & lastname cant match :P');
        }
    } else {
        $(this).addClass("valid").removeClass("invalid");
        $('.error1, .error2').html('');
        name_valid = true;
    }
})
$('.pass').on('input', function() {
    var invalid = false;
    var pass_valid = false;
        $(this).each(function() {
            if ($(this).val().length < 4) { // charecter length
                invalid = true;
            }
        });

    if (invalid) {
        $(this).addClass("invalid").removeClass("valid");
        if ($(this).hasClass('pass1')) {
            $('.error3').html('Requires 4 or more charecters');
        } else {
            $('.error4').html('Requires 4 or more charecters');
        }
        pass_valid = false;
    } else if ($('.pass').val() !== $('.pass2').val()) {
        $(this).addClass("invalid").removeClass("valid");
        if ($(this).hasClass('pass1')) {
            $('.error3').html('Password does not match');
        } else {
            $('.error4').html('Password does not match');
        }
        pass_valid = false;
    } else {
        $('.pass').addClass("valid").removeClass("invalid");
 ...