Form Validation

Frontbx's FormValidator provides a powerful component to easily validate forms.

• Instantiation
• Markup
• Validating
• Example

Instantiation

The FormValidator can be accessed through Frontbx's Container, providing your target <form> DOMElement as a parameter.

const validator = frontbx.FormValidator(document.querySelector('#myform'));

Markup

To setup a form for validation, use one of the pre-built validation rules as the data-js-validation attribute on any input:

<input type="email" name="email" data-js-validation="email">

Additionally, you can validate an input as required as well as validate the length of an input by providing the following attributes:

<!-- Data attributes -->
<input type="text" name="name" data-js-required="true" data-js-min-length="5" data-js-max-length="30">

<!-- Native attributes -->
<input type="text" name="name" required="true" minlength="5" maxlength="30">

Validating

Instantiate a FormValidator instance via Frontbx's Container, passing the target <form> DOMElement as the parameter.

const validator = frontbx.FormValidator(document.querySelector('#myform'));

The validate method will run validation on all inputs based on any validation attributes and return a Boolean. Any invalid .form-field elements will then be shown as invalid.

let valid = validator.validate();

if (valid)
{
    // do stuff
}

Additionally, once validate is called on a form, any inputs that fail validation will get a listener that listens for any changes and live validates the input whenever its value changes.

See the Input states documentation for details on input states.

The form method returns a key/value object of all input, textarea and select elements in the form.

let form = validator.form();

The append method appends a key/value pair to the form object from the form and returns it. Useful when you need to add something to an Ajax request like a CSRF token.

let form = validator.append('secret_key', '$FDS#$T$@');

The showResult method will add the context class to <form>, which in turns displays the appropriate form result:

validator.showResult('success');

See the Form results documentation for details on form result markup.

Finally, the destroy method removes any listeners and reverts the form to it's original state.

validator.destroy();

Example

Below is an example form using the validator. In a real request, you would use Frontbx's Ajax component or submit the form manually, however for this example we just use a timeout. Check the console log for more details.

<form id="my-form">

    <!-- name -->
    <div class="row pole-xs pole-s">
        <div class="form-field row">
            <input type="text" name="name" id="name" data-js-required="true" data-js-validation="name">
            <label for="name">Name</label>
        </div>
        <p class="help-danger">* Please enter a valid name.</p>
    </div>

    <!-- Email -->
    <div class="row pole-xs pole-s">
        <div class="form-field row">
            <input type="email" name="email" id="email" data-js-required="true" data-js-validation="email">
            <label for="email">Email</label>
        </div>
        <p class="help-danger">* Please enter a valid email address.</p>
    </div>

    <!-- Password -->
    <div class="row pole-xs pole-s">
        <div class="form-field row">
            <input type="password" name="password" id="password" data-js-required="true" data-js-validation="password">
            <label for="password">Password</label>
        </div>
        <p class="help-danger">* Passwords must include a number or special character.</p>
    </div>

    <!-- Submit -->
    <div class="row pole-xs pole-s">
        <button type="submit" class="btn with-loading js-form-validatior-btn">
            <span class="loader loader-1"></span>
            Submit
        </button>
    </div>

    <!-- Results -->
    <div class="form-result">
        <div class="msg msg-info" aria-hidden="true">
            <div class="msg-icon">
                <span class="fa fa-bell icon"></span>
            </div>
            <div class="msg-body">
                <p>Please check your email to activate your account</p>
            </div>
        </div>
        <div class="msg msg-success" aria-hidden="true">
            <div class="msg-icon">
                <span class="fa fa-check icon"></span>
            </div>
            <div class="msg-body">
                <p>Hooorayy! Your message was successfully sent!</p>
            </div>
        </div>
        <div class="msg msg-warning" aria-hidden="true">
            <div class="msg-icon">
                <span class="fa fa-triangle-exclamation icon"></span>
            </div>
            <div class="msg-body">
                <p>There was an unknown error. Please try again later or contact support.</p>
            </div>
        </div>
        <div class="msg msg-danger" aria-hidden="true">
            <div class="msg-icon">
                <span class="fa fa-xmark icon"></span>
            </div>
            <div class="msg-body">
                <p>You have been banned from creating an account with us.</p>
            </div>
        </div>
    </div>

</form>

/* Helpers */
const [find, has_class, add_class, remove_class, on] = frontbx.import(['find', 'has_class', 'add_class', 'remove_class', 'on']).from('_');

// Instantiate validator and cache vars
const form      = find('#my-form');
const validator = frontbx.FormValidator(form);
const submitBtn = find('button[type=submit]', form);
let fakeAjax;

on(submitBtn, 'click', function(e)
{
    // Don't submit if the form if it is being submitted
    if (has_class(submitBtn, 'active')) return false;

    // Validate the form
    let valid = validator.validate();

    // Clear fake ajax timeout
    clearTimeout(fakeAjax);

    // If validated, submit the form
    if (valid)
    {
        // Button shown as active
        add_class(submitBtn, 'active');

        // No Ajax?
        // form.submit(); return false;

        // Here you would send a real ajax request
        fakeAjax = setTimeout(() =>
        { 
            // Usually you would get the result from server here from the Ajax request
            let result = 'success';

            // Show 'success', 'info', 'danger' or 'warning' results
            validator.showResult('success');

            // remove btn active
            remove_class(submitBtn, 'active');

        }, 3000);
    }

    // Stop the form from submitting via POST
    return false;
});