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, Jul 25 '13 at 17:46
From the documentation: Get the current value of the **first** element in the set of matched elements — Barmar, Jul 25 '13 at 17:47
You need to attach a javascript function to your submit button. Where the function returns false if the fields are not valid. — Soturi, Jul 25 '13 at 17:48

omma2289 · Accepted Answer · 2013-07-25T17:57:42.930

40

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 '13 at 17:57

answered Jul 25 '13 at 17:52

omma2289

54,161
8
64
68

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; } – gnganapath May 02 '14 at 12:23

score 8 · Answer 2 · answered Jul 25 '13 at 17:49

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');
    }
});

score 7 · Answer 3 · answered Sep 21 '16 at 07:05

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 '16 at 07:05

Elnaz

2,854
3
29
41

1

What about entering just spaces? I just used this but it still submitting when entering blank spaces in the input fields. – alexventuraio Mar 13 '17 at 19:00
1

Then You can use Pattern attribute along with required. http://www.felgall.com/html5r.htm will help you. (not supported by safari browser) – Elnaz Mar 14 '17 at 05:38
Example with pattern attribute to disallow whitespace only submits: https://stackoverflow.com/a/17323588/1879699 – Andreas Sep 07 '20 at 04:14

score 4 · Answer 4 · answered Jul 25 '13 at 18:12

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 
        }
    })
})

Jonny Sooter · Answer 5 · 2013-07-25T18:01:29.763

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 '13 at 18:01

answered Jul 25 '13 at 17:49

Jonny Sooter

2,417
1
24
40

This is not the right answer, will submit even if username is empty – omma2289 Jul 25 '13 at 17:53

Using jQuery to prevent form submission when input fields are empty

5 Answers5

Linked