Form won't submit return false;

Question

My simple form won't submit after the input and textarea have been filled. edited for readability.

$(function () {
    $("#contactform").submit(function () {
        $(":input").not("[type=submit]").removeClass('error').each(function () {
            if ($.trim($(this).val()).length == 0) $(this).addClass('error');

        });            
        if($(document).hasClass("error")){
        return false;
}
    });
});


<form id="contactform" action="success.php" method="post">
  <input type="text" id="name" placeholder="name" autofocus >
  <input type="text" placeholder="email" >
  <textarea placeholder="message" ></textarea>
  <input type="submit">
  </input>
</form>

and what do you think is the problem? What have you done to solve it? Can you provide an example on JSfiddle? Can you do more things descript in [ask] to help us answering your question? — Wouter J, Mar 18 '13 at 21:33

score 1 · Answer 1 · answered Mar 18 '13 at 21:32

1

You are using return false; which prevents submission. Only use that when you want to stop the form from submitting (Eg errors in validation etc )

answered Mar 18 '13 at 21:32

Nick Andriopoulos

10,313
6
32
56

score 1 · Answer 2 · answered Mar 18 '13 at 21:33

1

Do not use return false everytime.

Check if you have inputs with errors like

return !!$('input.error').length;

answered Mar 18 '13 at 21:33

Ven

19,015
2
41
61

I don't think this is a very readable way of doing it. – Blender Mar 18 '13 at 21:34
"Is there any input with error" – Ven Mar 18 '13 at 21:35
It may not be easily readable, however it does work where the original did not. – Kevin B Mar 18 '13 at 21:53

Amar · Answer 3 · 2013-03-18T22:01:09.637

1

DO not use return false;, That stops the from submission.

Change your code to something like this:

    $(function () {
    $("#contactform").submit(function (e) {
        $(":input").not("[type=submit]").each(function () {
            if ($.trim($(this).val()).length == 0){ 
                $(this).addClass('error');
               e.preventDefault(); 
            }

        });

    });
});

edited Mar 18 '13 at 22:01

answered Mar 18 '13 at 21:34

Amar

11,930
5
50
73

Basic point here is that you shall use `return false;`, only when you want to stop the form from getting submitted, and that you may want to do when you feel that the form fields haven't been filled and hence I had it inside `if ($.trim($(this).val()).length == 0){ }` block... rest is upto you to figure out... – Amar Mar 18 '13 at 21:41
Hah... you had wrong code pasted in your question :| – Amar Mar 18 '13 at 21:43
This is close, but it stops the code on the first error rather than marking every input that has an error. – Kevin B Mar 18 '13 at 21:50
Yup I too noticed that, but thought that this would at least let the form submit. – Amar Mar 18 '13 at 21:51
doesn't the return false just exit out of the each loop? http://jsfiddle.net/7cnSM/ – wirey00 Mar 18 '13 at 21:53
Yes it does and on the way it also stops the form from being submitted. – Amar Mar 18 '13 at 21:56
@Amar it doesn't.. check the fiddle.. It will only break out of the each loop.. not stop the form from submitting – wirey00 Mar 18 '13 at 21:57
[returns inside each loop](http://stackoverflow.com/a/8224424/1385672) – wirey00 Mar 18 '13 at 22:01
oops, my bad.. check this out : http://jsfiddle.net/7cnSM/3/ It's better to use `preventDefault()` – Amar Mar 18 '13 at 22:02

score 1 · Accepted Answer · answered Mar 18 '13 at 21:48

You should check to see if there are any errors before returning false

$(function () {
    $("#contactform").submit(function () {
        $(":input").not("[type=submit]").removeClass('error').each(function () {
            if ($.trim($(this).val()).length == 0) $(this).addClass('error');    
        });
        // if there is anything with a class of error inside the form
        // can also use $(this).find('.error') - it's the same thing
        if($('.error',this).length){
            // then return false
            return false;
        }
    });
});

http://jsfiddle.net/D4F55/

Form won't submit return false;

4 Answers4