JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<form method="post" id="register_form">
    <p class="validate_msg">Please fix The errors below!</p>
    <p>
        <label for="username">Username</label>
        <input id="username" type="text" /> <span class="val_username"></span>
    </p>
    <p>
        <label for="name">Name</label>
        <input id="name" type="text" /> <span class="val_name"></span>
    </p>
    <p>
        <label for="email">Email</label>
        <input id="email" type="text" /> <span class="val_email"></span>
    </p>
    <p>
        <label for="reemail">Confirm Email</label>
        <input id="reemail" type="text" /> <span class="val_reemail"></span>
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" type="password" /> <span class="val_password"></span>
    </p>
    <p>
        <label for="repassword">Confirm Password</label>
        <input id="repassword" type="password" /> <span class="val_repassword"></span>
    </p>
    <input type="submit" name="submit" value="Register" />
</form>

CSS

.validate {
    color:red
}
.validate_msg {
    background-color:blue
}

JavaScript

jQuery(function ($) {
    var validation_holder;
    $("#register_form input[name='submit']").click(function (event) {
        var validation_holder = 0;
        var fields = ['username','name','email','reemail','password','repassword'];

        var email = $("form#register_form input#email").val();
        var reemail = $("form#register_form input#reemail").val();
        var password = $("form#register_form input#password").val();
        var repassword = $("form#register_form input#repassword").val();

        /* Validation Start */
        for( f in fields ){
            var field_name = fields[f];
            var value = $('#'+field_name).val();
                          
            if (value == "") {
                $("span.val_"+field_name).html("This field is required").addClass('validate');
                validation_holder += 1;
            } else {
                $("span.val_"+field_name).html("");
            }
        }
        if( validation_holder > 0 ){
            event.preventDefault();
            return;
        }
        
        if (email = "") {
            $("span.val_email").html("This field is required").addClass('validate');
            validation_holder = 1;
        } else {
            var email_regex = /^[w%_\-.\d]+@[\w.\-]+[.A-Za-z]{2,6}$/; //reg ex email check
            if (!email_regex.test(email)) { // if invalid email
                $("span.val_email").html("Invalid Email").addClass('validate');
                validation_holder = 1;
            } else {

                $("span.val_email").html("");
            }
        }

        if (reemail == "") {
            $("span.val_email2").html("This field is required").addClass('validate');
            validation_holder = 1;
        } else {
            if (email != reemail) {
                $("span.val_email2").html("Email does not match!").addClass('validate');
                validation_holder = 1;
            } else {
                $("span.val_email2").html("");
      ...