Form submission bypasses javascript validation

Question

Submission below bypasses javascript validation. Is it because onclick even or I'm missing something?

Thanks

FORM

<form name="myprofile" action="do_update" method="post" onsubmit="return validate_submission(this.name)">
   <input type="text" id="text_fullname" name="text_fullname" value="" maxlength="100" />
   <div id="submit_button" onclick="document.myprofile.submit()">SUBMIT</div>
</form>

JS

function validate_submission(formname)
{
    alert(formname); return false;
}

@Philip — The benefit of JavaScript form checking is that it is much faster then a round trip to the server. That is a real benefit, and this question is not pointless. — Quentin
– Quentin, Commented Dec 4, 2012 at 11:45
ie: visual aid.. Sorry mis-read the q, I thought he was trying to bypass another sites validation, not had my coffee, continue — Philip
– Philip, Commented Dec 4, 2012 at 11:47

Quentin · Accepted Answer · 2012-12-04 11:44:18Z

4

It isn't so much that you are using onclick as that you are using form_ref.submit() which submits a form without firing the submit event.

Your options:

Use a real submit button (and don't call submit() with JS). This is the best option. It will show up in screen reader forms modes. It can be tabbed to. It will work if JS is not turned on.
Call the validation function and check the result before calling submit().

answered Dec 4, 2012 at 11:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

BentCoder Over a year ago

Thanks for the controbution

BentCoder · Accepted Answer · 2012-12-04 12:29:27Z

-1

Add in an extra submission script, and call that from the div...

<script>
    function validate_submission(formname)
    {
        var is_valid = false;

        if (formname == 'myprofile')
        {
            is_valid = true;
        }

        perform_submit(formname, is_valid);
    }

    function perform_submit(formname, is_valid)
    {
        if (is_valid === true)
        {
            document.myprofile.submit()
        }
        else
        {
            alert('Invalid');
        }
    }
</script>
<form name="myprofile" action="do_update" method="post" onsubmit="return validate_submission(this.name)">
   <input type="text" id="text_fullname" name="text_fullname" value="" maxlength="100" />
   <div id="submit_button" onclick="validate_submission('myprofile')">SUBMIT</div>
</form>
</body>

edited Dec 4, 2012 at 12:29

BentCoder

12.8k23 gold badges100 silver badges173 bronze badges

answered Dec 4, 2012 at 11:49

thesimm

7743 silver badges12 bronze badges

1 Comment

BentCoder Over a year ago

Just discovered that if I add if (formname == 'myprofile') { return true; } else { return false; } doesn't validate form. Is it normal behaviour?

Collectives™ on Stack Overflow

Form submission bypasses javascript validation

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related