Geek asks and answers

Display warning using jQuery

I am making jQuery confirmation and I am having a problem. So far, I have the following code:

// catch any form submission
$('form').submit(function () {
    'use strict';
    // if the browser doesn't support HTML5 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 am trying to โ€œattachโ€ or display spannext to any input of a submitted form that is not validated, but I donโ€™t know how to do it. I want to do this unobtrusively, so I am creating the specified spaninside JavaScript.

Also, how can I prevent a form from being submitted if any of the fields in the submitted form is not confirmed?

+3
source share
4 answers

span . , , . - , .

$('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 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
});
+1

? jquery form validation.

: .

:

$('form').submit(function (e) {
    'use strict';
    var valid = true;
    var $form = $(this);
    $form.find("span.error").remove();
    // if the browser doesn't support HTML5 required attribute
    if (!Modernizr.input.required) {
        // catch any field that should be required
        $form.find(':input[required]').each(function () {
            // if is empty
            var $this = $(this);
            if ($.trim($this.val()) === '') {
                // create a span that contains a warning to the user
               $this.after("<span class='error'>This field is required.</span>");
               valid = false;
            }
        });
    }
    if(!valid){
       e.preventDefault();
    }
});

:

$('form').submit(function (e) {
   'use strict';
    Modernizr.input.required ? e[$(this).find("span.error").remove().end()
        .find(':input[required][value=""]')
        .after("<span class='error'>This field is required.</span>")
        .length ? 'preventDefault': 'isDefaultPrevented']() : null;
});
+2
 var flag = 0;
 if ($(this).val() === '') {
       flag = 1;
       var warningblock = '<span class="warning">This field is required.</span>';
       $(this).after(warningblock);             
    } 
//end of each loop
if(flag){ //put this block out side the loop
 return false; //form wont submit
}
return true;

    CSS
    .warning{
    /**add styles for warning here***/
    }
-2
source

jsFiddle ( http://jsfiddle.net/4KxzB/10/ )

Here is my working example, it works as expected in chrome.

To stop submitting a form, simply return false;

<form>
    <input type="text" required/>
    <input type="submit" value="submit"/>
</form>

<script>
    $('form').submit(function ()
    {
        'use strict';
        // if the browser doesn't support HTML5 required attribute
        if (!Modernizr.input.required)
        {
            var validInput = true;

            // 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.';

                    // Cancels form submit
                    validInput = false;
                }
            });

            return validInput;
        }
    });
</script>โ€‹
-2
source

More articles:


All Articles