JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<p id="general-message-section"></p>
<form id="contact-form" method="post" action="#">
    <fieldset>

        <ul>
            <li>
                <label for="contact-name">Contact name *:</label>
                <input type="text" id="contact-name" tabindex="1" class="required" autofocus />
            </li>
            <li>
                <label for="contact-email">Contact email address *:</label>
                <input type="text" id="contact-email" tabindex="2" class="required" />
            </li>
            <li>
                <label for="contact-phone">Contact phone number:</label>
                <input type="text" id="contact-phone" tabindex="3" />
            </li>
            <li>
                <input type="submit" id="submit-btn" tabindex="4" value="Submit" />
            </li>
        </ul>
    </fieldset>
</form>

JavaScript

(function(window, $) {

    var Namespace = (function(Namespace) {

        Namespace = {

            // Main
            run : function() {
                this.validate.run('form');
            },              

            // Validation
            validate : {

                // error message span
                messageBox : '<span class="message" />',

                // add any field here
                fields : {
                    nameField : $('#contact-name'),
                    emailField : $('#contact-email'),
                    phoneField : $('#contact-phone')
                },

                // run validation
                run : function(formName) {

                    $(formName).on('submit', $.proxy(this.validateField, this));
                },

                validateField : function() {
                    var valid = true;
                    for (var field in this.fields) {
                        if (this.fields.hasOwnProperty(field)) {
                            if(this.checkField(this.fields[field]) === false) valid = false;
                        }
                    }
                    console.log(valid);
                    if(!valid) return false;

                    $('#general-message-section').text('Form successfully sent, thank you!');
                },

                checkField : function(field) {

                    var messageBox = $(this.messageBox);

                    field.closest('li').find('.message').remove();

                    if (field.hasClass('required')) {
                        if (!field.val()) {
                            messageBox.text('This field is empty!');
                            field.closest('li').append(messageBox);
                            return false
                        }
                    }

                    if (this.fields.emailField.val()) {
                        this.fields.emailField.closest('li').find('.message').remove();

                       ...