Question

I’m doing some jQuery form validation and I came up with an issue. I have the following code so far:

// catch any form submission
$('form').submit(function () {
    'use strict';
    // if the browser doesn't support HTML5's required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $(this).find('input[required]').each(function () {
            // if is empty
            if ($(this).val() === '') {
                // create a span that contains a warning to the user
                var requiredFieldWarning = document.createElement('span');
                requiredFieldWarning.text = 'This field is required.';

                // display the span next to the current field
            }
        });
    }
});

I’m trying to “attach” or display a span next to any input of the submitted form that doesn’t validate, but I don’t know how to. I want to do this unobtrusively, that’s why I create the said span inside JavaScript.

Also, how can I prevent the form from being submitted if any of the fields of the submitted form doesn’t validate?

Answer 1

I am adding a span tag after the input. Before the form is revalidated it removes these spans and recreates only if needed. If any of these spans are added the form isn’t submitted.

$('form').submit(function (event) {
    'use strict';

    $('.invalid-error', $(this)).remove();
    // remove any old spans

    var submit_form = true;
    // form submits by default

    // if the browser doesn't support HTML5's required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $(this).find('input[required]').each(function () {
            // if is empty
            if ($(this).val() === '') {  

                $(this).after('<span="invalid-error">This field is required.</span>');
                // add span after input
                submit_form = false;

            }
        });
    }
    if(!submit_form) event.preventDefault();
    // stop form from submitting
});