form onclick validation JQUERY

Question

I am trying to validate a simple form before the php process. When I let every input empty, the form is stopped, but if I stay on the same page and fill every inputs, the form won't submit.

I guess the return false; stays at the first validation. I'm a beginner :)

So here is an excerpt:

HTML

<input onblur="validName();" type="text"  name="name" id="name">
<textarea id="message" name="message" onblur="validMess();" rows="5"></textarea>

<input type="submit" name="submit" onclick="validSubmit();" value="send">

JQUERY

function validSubmit() {
var message = $("#message").val();
var name = $("#name").val();

    if( name == ''){
        $("#valid-name").removeClass('hide'); // if empty = show error message
        $("#form").submit(function(e){
            return false;
        });
    }
    else {
        $("#valid-name").addClass('hide'); // all good = hide error message
        $("#form").submit(function(e){
            return true;
        });
    }


    if(message == ''){
        $("#valid-mess").removeClass('hide'); // if empty = show error message
        $("#form").submit(function(e){
            return false;
        });
    }
    else { 
        $("#valid-mess").addClass('hide'); // all good = hide error message
        $("#form").submit(function(e){
            return true;
        });
    }

}

IDs : valid-name and valid-mess are two error messages set to display: none; by default.

I'm a bit lost, the answer can be in JS or Jquery I don't mind.

Thank you for your time.

Denys Séguret · Accepted Answer · 2013-05-26 21:23:24Z

2

Don't call submit from the submit callback, just return false when it's not OK :

function validSubmit() {
    var message = $("#message").val();
    var name = $("#name").val();
    $("#valid-name,#valid-mess").addClass('hide');
    var ok = true;
    if (name == ''){
        $("#valid-name").removeClass('hide');
        ok = false;
    }
    if (message == ''){
        $("#valid-mess").removeClass('hide');
        ok = false;
    }
    return ok;
}

Also, as noted by Barmar, this isn't the best way to bind the validation. Instead of binding to the click event, you'd better use

$('#id_of_the_form').submit(validSubmit);

edited May 26, 2013 at 21:23

answered May 26, 2013 at 21:15

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

2 Comments

Barmar Over a year ago

You should also call validSubmit() in the form's onsubmit handler.

bonhomme Over a year ago

Yep, it works perfectly, thank very much to you two ! I owe you a beer ;)

Collectives™ on Stack Overflow

form onclick validation JQUERY

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related