Using jQuery to prevent form submission when input fields are empty

Question

The solution should be pretty straightforward. I'm trying to prevent the form from submitting properly when no value is found within the input boxes. Here's my JSFiddle: http://jsfiddle.net/nArYa/7/

//Markup

<form action="" method="post" name="form" id="form">
<input type="text" placeholder="Your email*" name="email" id="email">
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name"
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>

//jQuery

if ($.trim($("#email, #user_name").val()) === "") {
    $('#form').submit(function(e) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    })
}

As you can see in the JSFiddle, the problem is that when I type something into both fields, the alert box STILL pops up. I'm having a hard time figuring out why. Is there something wrong within my if($.trim($"#email, #user_name").val()) === "") ?

Yes you should check each of them individually, if you only use one selector, only one value will be returned — omma2289
– omma2289, Commented Jul 25, 2013 at 17:46
From the documentation: Get the current value of the first element in the set of matched elements — Barmar
– Barmar, Commented Jul 25, 2013 at 17:47
You need to attach a javascript function to your submit button. <button onclick="somefunction();" .. /> Where the function returns false if the fields are not valid. — Soturi
– Soturi, Commented Jul 25, 2013 at 17:48

omma2289 · Accepted Answer · 2013-07-25 17:57:42Z

41

Two things, #1 the check for empty fields should happen on every attempt of submit, #2 you need to check each field individually

$('#form').submit(function() {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") {
        alert('you did not fill out one of the fields');
        return false;
    }
});

Updated fiddle

edited Jul 25, 2013 at 17:57

answered Jul 25, 2013 at 17:52

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gnganapath Over a year ago

It's working directly implement code if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") { alert('you did not fill out one of the fields'); return false; }

Manu Clementz · Accepted Answer · 2013-07-25 17:49:04Z

8

Your check occurs on page load. You need to check the field when the form is submitted.

$('#form').submit(function(e) {
    if ($.trim($("#email, #user_name").val()) === "") {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    }
});

answered Jul 25, 2013 at 17:49

Manu Clementz

1,80712 silver badges19 bronze badges

Comments

Elnaz · Accepted Answer · 2016-09-21 07:05:33Z

7

HTML5: use required in input tag

A boolean attribute.
Input field must be filled out before submitting the form.
Works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
```
<input required type='text'...>
```

w3schools hint

answered Sep 21, 2016 at 7:05

Elnaz

2,9103 gold badges34 silver badges43 bronze badges

3 Comments

alexventuraio Over a year ago

What about entering just spaces? I just used this but it still submitting when entering blank spaces in the input fields.

Elnaz Over a year ago

Then You can use Pattern attribute along with required. felgall.com/html5r.htm will help you. (not supported by safari browser)

Andreas Over a year ago

Example with pattern attribute to disallow whitespace only submits: stackoverflow.com/a/17323588/1879699

kitimenpolku · Accepted Answer · 2013-07-25 18:12:21Z

4

I guess that this will help:

$('#form').submit(function(e) {
    e.preventDefault();
    $("#email, #user_name").each(function(){
        if($.trim(this.value) == ""){
            alert('you did not fill out one of the fields');
        } else {
            // Submit 
        }
    })
})

answered Jul 25, 2013 at 18:12

kitimenpolku

2,6044 gold badges41 silver badges59 bronze badges

Comments

Jonny Sooter · Accepted Answer · 2013-07-25 18:01:29Z

2

Put your if statement inside the callback:

$('#form').submit(function(e) {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
        //You can return false here as well
    }
});

edited Jul 25, 2013 at 18:01

answered Jul 25, 2013 at 17:49

Jonny Sooter

2,4271 gold badge24 silver badges40 bronze badges

1 Comment

omma2289 Over a year ago

This is not the right answer, will submit even if username is empty

Collectives™ on Stack Overflow

Using jQuery to prevent form submission when input fields are empty

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Linked

Related