Skip to Content

nebulaLiveValidator()

Real-time validation for form inputs to help prevent errors before submission attempt. Uses Bootstrap validation classes (and also works with Contact Form 7).

JavaScript May 3, 2018

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Examples

Various validated input elements.

HTML
<form class="nebula-validate">
    <div class="form-group">
        <label class="form-control-label" for="yourname">Your Name</label>
        <input id="yourname" class="form-control form-control-lg nebula-validate-text" type="text" placeholder="Your name" required />
        <small class="form-text text-muted">Basic text validates as long as there is value.</small>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="emailaddress">Email</label>
        <input id="emailaddress" class="form-control form-control-lg nebula-validate-email" type="email" placeholder="Email address" />
        <div class="invalid-feedback hidden">Please check that you've entered a valid email address.</div>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="url">URL</label>
        <input id="url" class="form-control form-control-lg nebula-validate-url" type="url" placeholder="http://" />
        <div class="invalid-feedback hidden">Please verify you have entered a valid URL.</div>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="phonenumber">Phone Number</label>
        <input id="phonenumber" class="form-control form-control-lg nebula-validate-phone" type="tel" placeholder="Phone number" />
        <div class="invalid-feedback hidden">Please verify you have entered a valid phone number.</div>
        <small class="form-text text-muted">Supports variations of country codes, area codes, delimiters, and even letters. Try adding an extension, too!</small>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="birthday">Date of Birth</label>
        <input id="birthday" class="form-control form-control-lg nebula-validate-date" type="text" placeholder="Date of birth" />
        <div class="invalid-feedback hidden">Please verify you have entered a valid date.</div>
        <small class="form-text text-muted">Supports both month day year and day month year formats. Also support written out days (with or without year).<br/>Example shown as text input type, but works well with date input type too.</small>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="birthday">Favorite NFL Team</label>
        <select id="fav-nfl-team" class="form-control form-control-lg nebula-validate-regex" data-valid-regex="eagles">
            <option value="">Select a team...</option>
            <option value="eagles">Philadelphia Eagles</option>
            <option value="cowboys">Dallas Cowboys</option>
            <option value="giants">New York Giants</option>
            <option value="redskins">Washington Redskins</option>
        </select>
        <div class="invalid-feedback hidden">I'm sorry, the team you have selected is terrible.</div>
        <small class="form-text text-muted">Example of simple RegEx validation. With select menus, be sure the first option has <code>value=""</code></small>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="regexexample">Favorite HEX color</label>
        <div class="input-group">
            <div class="input-group-addon">#</div>
            <input id="regexexample" class="form-control form-control-lg nebula-validate-regex" data-valid-regex="^#?([a-f0-9]{6}|[a-f0-9]{3})$" type="text" />
        </div>
        <div class="invalid-feedback hidden">Invalid HEX code.</div>
        <small class="form-text text-muted">Example of more complex RegEx validation.</small>
    </div>

    <div class="form-group">
        <label class="form-control-label">Choose an option:</label>
        <div class="form-check form-check-inline">
            <label class="form-check-label">
                <input type="radio" class="form-check-input nebula-validate-radio" name="example-radio-options" value="option1" required /> <div class="label-options"> I am right-handed</div>
            </label>
        </div>
        <div class="form-check form-check-inline">
            <label class="form-check-label">
                <input type="radio" class="form-check-input nebula-validate-radio" name="example-radio-options" value="option2" required /> <div class="label-options"> I am left-handed</div>
            </label>
        </div>
        <div class="invalid-feedback hidden">Please choose your handedness.</div>
        <small class="form-text text-muted">Nebula validation for radios only appears if inputs are somehow unchecked or use <code>applyValidationClasses()</code> manually.</small>
    </div>

    <div class="form-group">
        <label class="form-control-label">Check all that apply:</label>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input nebula-validate-checkbox" name="example-checkbox-apply" value="live-on-earth" required /> <div class="label-options"> My primary residence on planet Earth.</div>
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input nebula-validate-checkbox" name="example-checkbox-apply" value="eyes-closed" required /> <div class="label-options"> When my eyes are closed they are usually not also open.</div>
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input nebula-validate-checkbox" name="example-checkbox-apply" value="never-used-internet" required /> <div class="label-options"> I have never used the Internet.</div>
            </label>
        </div>
        <div class="invalid-feedback hidden">Certainly at least one of those applies!</div>
        <small class="form-text text-muted">Checkbox validation only triggers after an input within the group becomes unchecked.</small>
    </div>

    <div class="form-group">
        <label class="form-control-label" for="yourname">Message</label>
        <textarea id="yourmessage" class="form-control form-control-lg nebula-validate-textarea" placeholder="Enter your message here..." rows="4"></textarea>
        <div class="invalid-feedback hidden">Your message can not be empty.</div>
        <small class="form-text text-muted">Nebula removes validation when focused on textareas to avoid distractions.</small>
    </div>
</form>

Applying a RegEx validator to a Contact Form 7 input field (Zip Code)

JavaScript
jQuery('input[name=zipcode]').removeClass('nebula-validate-text').addClass('nebula-validate-regex').attr('data-valid-regex', '^\\d{5}((-)?\\d{4})?$'); //Remember to escape your escapes!

Demo


Your name can not be empty.
Basic text validates as long as there is value.
Please check that you have entered a valid email address.
Please verify you have entered a valid URL.
Please verify you have entered a valid phone number.
Supports variations of country codes, area codes, delimiters, and even letters. Try adding an extension, too!
Please verify you have entered a valid date.
Supports both month day year and day month year formats. Also support written out days (with or without year).
Example shown as text input type, but works well with date input type too.
I'm sorry, the team you have selected is terrible.
Example of simple RegEx validation. With select menus, be sure the first option has value=""
#
Invalid HEX code.
Example of more complex RegEx validation.
Your message can not be empty.
Nebula removes validation when typing in textareas to avoid distractions.

Additional Notes

Use the class nebula-validate on the form (or containing element) to enable validation. In Contact Form 7, either wrap the whole thing in a <div> or modify the shortcode with html_class="nebula-validate" as seen here.

Note: This validation is meant for visual assistance only (to improve user experience). It is not intended to do secure validation- please use server-side validation for security purposes! Pre-defined RegEx patterns may not perfectly capture all nuances- this is meant for simple forms.

Text / Select

Use the class nebula-validate-text or nebula-validate-select to validate simple text fields and select menus.

Success if they have any value.

Regular Expressions (RegEx)

Use the class nebula-validate-regex to validate fields using a custom RegEx pattern. This requires an attribute of pattern to be used on the same input. This validation method can be used on any type of input! Be sure to set the value attribute accordingly on appropriate types (like select, checkbox, radio, etc).

Warning if not matching pattern while typing, danger if not matching and not focused. Success if matching.

RegEx patterns should not include the start or end slashes / or flags (/g,/m,/i, etc).

Note: It is currently not possible to use RegEx on a Contact Form 7 form without using custom JavaScript (due to it needing a data attribute). Remember, if using JavaScript to designate the pattern attribute, you’ll need to escape your escapes (See JS example above)!

Email

Use the class nebula-validate-email to validate email fields.

Warning if not valid email address while typing. Danger if invalid and not focused. Success if valid.

URL

Use the class nebula-validate-url to validate URL fields.

Warning if not valid URL while typing. Danger if invalid and not focused. Success if valid.

Phone Number

Use the class nebula-validate-phone to validate phone number fields.

Warning if not valid phone number while typing. Danger if invalid and not focused. Success if valid.

Date

Use the class nebula-validate-date to validate date fields (this works on both date and text input types). This supports both month, day, year and day, month, year formats (and various delimiters). It also works with written-out dates (with or without years).

Warning if not valid date while typing. Danger if invalid and not focused. Success if valid.

Textarea

Use the class nebula-validate-textarea to validate textareas.

Success if they have any value. Removes validation while typing (to avoid distraction).

Checkbox / Radio

Use the class nebula-validate-checkbox or nebula-validate-radio to validate checkboxes and radio fields.

Validation classes will only be applied after unchecking an input. This means that radio groups may not get validation classes without manual JavaScript.

Submit Button

When the submit button is hovered or focused on, any empty fields that are required will highlight with a red border as a real-time visual indicator for the user. This highlight uses the class nebula-empty-required.

Source File

This function was not found in /assets/js/nebula.js. Please report this error.

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
function nebulaLiveValidator(){
    //Write your own code here, leave it blank, or return false.
}