javascript validations before form submission

Question

I added a javascript form validation to my code, before submitting it to the server. When the user clicks submit it should call the javascript validator before submitting it. If the validator gives the ok, only then should it submit. I seem to be doing something wrong, because it submits regardless of what the validator says...

Html:

<form id="start_form" method="post" onsubmit="return validate_form(this);">
    <ul class="error">
    </ul>
    <label for="title" >Title: </label><input value="{{ post.title }}" type="text" name="title">
    <label for="summery" >Summery/Prompt: <textarea name="summery">{{ post.summery }}</textarea>
    <label for="person">Participants Emails: </label>
    <ul id="people">
        <li><input type="text" name="person1"></li>
        <li><input type="text" name="person2"></li>
    </ul>
    <a href="javascript:void(0)" onclick="add_group();"><img class="img_button" width="30px" height="30px" src="{{ STATIC_URL }}Image/plus_button.png" /></a>
    <a href="javascript:void(0)" onclick="remove_group();"><img class="img_button" width="30px" height="30px" src="{{ STATIC_URL }}Image/minus_button.png" /></a>
    <button type="submit" class="button">Start Game</button>
    <input type="hidden"  id="pn" name="pn" value="2">
</form>

Javascript function:

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
function append_error(m) {
    c = "<li>" + m + "</li>"
    $('#error').appendChild(c)
    }
function validate_form(form) {
        var e = true
        if (form.title.value == "") {
            append_error("Title Required");
            e = false
        }
        if (form.summery.value == "") {
            append_error("Summery Required");
            e = false
        }
        for (i = 0; i < Number(form.pn.value); i++){
            email = $('[name="person"' + i++ + '"]').innerText
            if(email == ""){
                append_error("Email #" + ++i + " can not be blank")
                e = false
            } else if (!validateEmail(email)) {
                append_error("Email #" + i++ + " is not valid")
                e = false
            }
        }
        return e;
    }

Check your console for errors - your validate method may be crashing before e can be returned — Adam Rackis
– Adam Rackis, Commented Dec 25, 2012 at 19:35
I would, but the page reloads before anything can load to the console.. — sinθ
– sinθ, Commented Dec 25, 2012 at 19:40
1- you do not have ; at the end of most of your javascript lines 2- do not use e as a variable cause it's used for events, change the name of your e variable. — EhsanT
– EhsanT, Commented Dec 25, 2012 at 19:42
Add console.log(m); to append_error(). Set breakpoints in validate_form(). — Barmar
– Barmar, Commented Dec 25, 2012 at 19:47

salexch · Accepted Answer · 2012-12-25 20:24:05Z

2

jquery doesn't have appendChild method. in your function:

function append_error(m) {
    c = "<li>" + m + "</li>"
    $('#error').appendChild(c)
}

this cause an error that submition eventually ignores your validation function

edited Dec 25, 2012 at 20:24

answered Dec 25, 2012 at 20:09

salexch

2,7041 gold badge21 silver badges17 bronze badges

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

1 Comment

Kevin M Over a year ago

You are correct. The .appendChild() method is a native JavaScript function and not part of jQuery. Reference

Kevin M · Accepted Answer · 2012-12-25 21:23:52Z

0

It looks like you are using jQuery so you can bind the submit event like so:

$('#start_form').submit(function(){
    return validate_form(this);
});

edited Dec 25, 2012 at 21:23

answered Dec 25, 2012 at 20:15

Kevin M

1,58417 silver badges38 bronze badges

2 Comments

salexch Over a year ago

your code wouldn't work.. preventDefauld wont execute the submit, and you need to return true or false $('#start_form').submit(function(e){ return validate_form(this); });

Kevin M Over a year ago

@salexch - This is true. I have edited the example to work for them. In truth I was expecting them to manually send the form submission.

Collectives™ on Stack Overflow

javascript validations before form submission

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related