JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="http://www.barrycorrigan.com/assets/js/vendor/jquery.maskedinput.min.js"></script>
<form method="post" name="form" id="form" class="form" action="">

                <div class="info  align-right"><span class="error">*</span> Required</div>

                <fieldset>
                    <div class="group">
                        <label for="name">Name</label>
                        <input id="name" name="name" type="text" required />
                    </div>

                    <div class="group">
                        <label for="UserEmail">Email <span class="req">*</span></label>
                        <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
                    </div>

                    <div class="group">
                        <label>Password: <span class="req">*</span></label>
                        <input type="password" name="password" id="password" value="" size="32" />
                    </div>

                    <div class="group">
                        <label>Confirm Password: <span class="req">*</span></label>
                        <input type="password" name="password-check" id="password-check" value="" size="32" />
                    </div>
                </fieldset>

                <fieldset class="clearfix">

                    <div class="group  options">
                        <legend>Country</legend>
                        <div class="group--left">
                            <input id="usa" name="country" type="radio">
                            <label for="usa">United States</label>

                            <input id="argentina" name="country" type="radio">
                            <label for="argentina">Argentina</label>
                        </div>
                    </div>

                    <div class="group">
                        <label>Phone Number</label>
                        <div class="group--left">
                            <input id="phone"...

JavaScript

$(function() {

    $("#submit").click(function(){

        var hasError = false;
        var passVal = $("#password").val();
        var checkVal = $("#password-check").val();
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var emailaddressVal = $("#UserEmail").val();

        if (emailaddressVal === '') {

            alert("Please enter your email address.");
            $("#UserEmail").addClass('errors');
            hasError = true;

        } else if(!emailReg.test(emailaddressVal)) {

            alert("Enter a valid email address.");
            $("#UserEmail").addClass('errors');
            hasError = true;

        } else if (passVal === '') {

            alert("Please enter a password.");
            $("#password").addClass('errors');
            hasError = true;

        } else if (checkVal === '') {

            alert("Please re-enter your password.");
            $("#password-check").addClass('errors');
            hasError = true;

        } else if (passVal != checkVal ) {

            alert("Passwords do not match.");
            $("#password-check").addClass('errors');
            $("#password").addClass('errors');
            hasError = true;

        }

        if(hasError === true) {
            return false;
        }

    });

    $("#usa").click(function() {
        $(".phone").mask("999-999-9999", {
            placeholder: " "
        });

        $("#example").text("123-456-7890");
    });

    $("#argentina").click(function() {
        $(".phone").mask("99-99-9999-9999", {
            placeholder: " "
        });

        $("#example").text("12-34-5678-9000");
    });

    $("#usa").click(); // Set default

    $("#form").submit(function(){
        console.log($(this).serializeArray());
    });
});