JQuery check required fields

Question

I have created this function in JQuery:

function CheckRequired() {
    var ret = true;

    $(".required").each( function() {
        var check = $(this).val();

        if(check == '') {
            //alert($(this).attr("id"));
            ret = false;
        }
    });

    if(!ret) {
        alert("One or more fields cannot be blank");
        return false;
    }
}

on my forms submit buttons, i run this onClick

<input type="submit" onClick="CheckRequired();" />

if any fields in the form with a class of required have a blank value the error will alert to the user and the form should not submit.

the alert is showing, however the form still seems to be submitting

score 1 · Accepted Answer · answered Feb 11 '15 at 01:06

1

use preventDefault. This method makes sure the default action of the event will not be triggered.

function CheckRequired(event) {
var ret = true;

$(".required").each( function() {
    var check = $(this).val();

    if(check == '') {
        //alert($(this).attr("id"));
        event.preventDefault();
    }
});

if(!ret) {
    alert("One or more fields cannot be blank");
    event.preventDefault();
}

}

answered Feb 11 '15 at 01:06

maxspan

13,326
15
75
104

`return false` does the same, but when event handler will be linked to button rather than form, it will prevent button's behavior and won't let form be submitted unless you do that yourself from javascript – paulitto Feb 11 '15 at 01:31

score 0 · Answer 2 · answered Feb 11 '15 at 00:52

To prevent form from submission you should bind event to form's onsubmit, and return function result

<form onsubmit="return CheckRequired()" />

Also, as you already use jquery it would be much more convenient to bind events in javascript:

$('#form_id').submit(function(){
  //your form submit code
})

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

I think you have to prevent the default submission action by using event.preventDefault(); as noted here: Prevent submit button with onclick event from submitting

edited May 23 '17 at 10:33

Community

1
1

answered Feb 11 '15 at 00:54

RamRovi

986
9
13

Won't prevent the form submitting if user hits enter or any other method of submitting other than this button. – David Barker Feb 11 '15 at 00:55

JQuery check required fields

3 Answers3