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()) === "") ?

Answer 1

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

Answer 2

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