JSFiddle - React, Tailwind, and code Playground

by Manuel Rodriguez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <div class="container">
        <div class="card align-items-center">
            <div class="card-body">
                <!-- Title -->
                <h4 class="card-title text-center">Cats.com</h4>
                
                <!-- Form -->
                <form name="form">
                
                    <!-- First Name -->
                    <div class="form-group">
                        <label for="firstName">First name</label>
                        <input class="form-control" name="firstName" type="text" placeholder="First Name">
                    </div>
                    
                    <!-- Last Name -->
                    <div class="form-group">
                        <label for="lastName">Last name</label>
                        <input class="form-control" name="lastName" type="text" placeholder="Last Name">
                    </div>
                    
                    <!-- Email -->
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input class="form-control" name="email" type="text" placeholder="Email">
                    </div>
                    
                    <!-- Phone Number -->
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input class="form-control" name="phone" type="text" placeholder="Phone Number">
                    </div>
                    
                    <!-- Buttons action -->
                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary">Clear</button>
                    </div>
                </form>
                
                <!-- Alert message -->
               ...

CSS

.container {
    margin-top: 10px;
}

.container form {
    min-width: 440px;
}

JavaScript

// Module Pattern
const ValidationModule = (function() {
    const validators = {
        name: /^[a-zA-Z]+$/,
        phone: /^\({1}\d{3}\){1}\d{3}[-]{1}\d{4}$/,
        email: /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/
    };

    const classes = {
        border: {
            danger: 'border-danger',
            sucess: 'border-success'
        },
        alert: {
            danger: 'alert-danger',
            sucess: 'alert-success'
        }
    };

    const elements = [
        {
            id: 'firstName',
            selector: document.querySelector('input[name="firstName"]'),
            pattern: validators.name
        },
        {
            id: 'lastName',
            selector: document.querySelector('input[name="lastName"]'),
            pattern: validators.name
        },
        {
            id: 'phone',
            selector: document.querySelector('input[name="phone"]'),
            pattern: validators.phone
        },
        {
            id: 'email',
            selector: document.querySelector('input[name="email"]'),
            pattern: validators.email
        }
    ];

    const actions = {
        submit: document.querySelector('button[type="submit"]'),
        form: document.querySelector('form'),
        alert: document.querySelector('.alert')
    };

    const messages = {
        sucess: 'Success your information has been sent!',
        error: "Error there's something wrong with your information."
    };

    const init = () => {
        // Submit listener
        _submitListener();

        // Reset Listener
        _resetListener();
    };

    /**
     * Submit action Listener
     */
    const _submitListener = () => {
        actions.form.addEventListener('submit', (event) => {
            event.preventDefault();

            let isValidForm = true;

            _cleanClasses();

            for (let index = 0; index < elements.length; index++) {
                const el = elements[index];

								// check form validation
 ...