Javascript - Form still submits after error message

Question

Probably a little typo or something, but I have looked and looked, and I can't find it. I have looked at numerous postings for the exact same thing, and I still can't figure it out. Any help would be appreciated.

<script language="Javascript">

function validateForm()
{
  var x = document.addNewForm.ecrNumber.value;
  if (x==null || x=="")
  {
    alert("ECR Number must be filled out");
    document.addNewform.ecrNumber.focus();
    return false;
  }

  var y=document.addNewForm.origin.value;
  if (y==null || y=="")
  {
    alert("Originator Name must be filled out");
    document.addNewform.origin.focus();
    return false;
  }
  var des=document.addNewform.descript.value;
  if (des=null || des=="")
  {
    alert("Description must be filled out");
    document.addNewform.descript.focus();
    return false;
  }
  return true;
}



</script>

And the html

 <form name="addNewForm" action="index.php/ecr-form-to-database" onSubmit="return validateForm();" method="post">
 <table width="60%">
    <tr><td>ECR No.: </td><td><input type="textbox" id="ecrNumber" name="ecrNumber" /> </td> </tr>
    <tr><td>Originator Name: </td><td><input type="textbox" id="origin" name="origin" value="<?php print $empName;?>" / ></td></tr>
    <tr><td>Description:</td><td><textarea id="descript" name="descript"></textarea></td></tr>
    <tr><td> </td><td> </td></tr>
    <tr><td colspan="2" style="text-align:center"><input type="submit" value="Submit Form" /></td></tr>
    </table>
    </form>

Open the console -> `Cannot read property 'ecrNumber' of undefined`, in other words, `document.addNewform` doesn't do what you think it does. — adeneo, Jun 28 '13 at 18:46
Just to clarify: if your validation function to throws an error, the form will still submit by its default action (submission has not been prevented by the JS). The question here appears to be "where is my JS error?". — showdev, Jun 28 '13 at 18:55

adeneo · Accepted Answer · 2013-06-28T18:56:52.037

Not all browsers store forms and ID's directly on the document, but as all your elements have ID's, why aren't you using that :

function validateForm() {
    var x   = document.getElementById('ecrNumber');
    var y   = document.getElementById('origin');
    var des = document.getElementById('descript');

    if ( ! x.value ) {
        alert("ECR Number must be filled out");
        x.focus();
        return false;
    }

    if ( ! y.value ) {
        alert("Originator Name must be filled out");
        y.focus();
        return false;
    }

    if ( ! des.value ) {
        alert("Description must be filled out");
        des.focus();
        return false;
    }

    return true;
}

FIDDLE

Got caught up in a quick meeting so I wasn't able to thank you earlier. But Thanks, completely worked. I should've thought to try it this way. Not too advanced on javascript, more a software type that got turned into web dev for a new job. — wiscWeb, Jun 28 '13 at 19:21

score 0 · Answer 2 · answered Jun 28 '13 at 18:48

0

You have not called the function validateForm.

<input type="submit" onclick="return validateForm();" value="Submit Form" />

answered Jun 28 '13 at 18:48

reggaemahn

6,272
6
34
59

It's in the `
` tag: `onSubmit="return validateForm();"`
– showdev Jun 28 '13 at 18:50
Actually it still won't work... still submits. any other ideas? thanks for the quick response by the way. – wiscWeb Jun 28 '13 at 18:50
@dougjore Yes, you should add this to submit event. W3Schools is correct. – pvnarula Jun 28 '13 at 18:51
Using `onsubmit` will also catch submissions by hitting the "enter" key (and other methods), rather than just the submit button. http://stackoverflow.com/questions/6908187/form-onsubmit-versus-submit-button-onclick#6909770 – showdev Jun 28 '13 at 18:52
@dougjore - you're doing it right, this answer is wrong, and it's lowercase -> `onsubmit`, not `onSubmit` – adeneo Jun 28 '13 at 18:52
@adeneo How is the answer wrong when the OP said it worked for him? And besides, onclick is a perfectly legal event for the tag. Get your facts right mate. – reggaemahn Jun 28 '13 at 18:58
Sure it is, but the onsubmit event on the form itself would be the proper event to bind a handler to when validating a form, which is exactly what the OP is doing. – adeneo Jun 28 '13 at 18:59
@adeneo I appreciate you trying to help but what exactly do you mean by 'proper' event. It's one of the options I agree, but not the absolute right option. – reggaemahn Jun 28 '13 at 19:03
@JeevanJose I agree with adeneo . If you hit enter in the form fields the onclick will not trigger and onsubmit is the right choice. – pvnarula Jun 28 '13 at 19:04
^^^^ My point exactly. onclick on the submit button is the right choice if you're trying to figure out if someone clicked the button. If you're trying to figure out if someone submitted the form, it's the wrong choice, as there are many ways to submit a form, and when validating you almost never want the onclick event handler on the submit button. Also, the issue isn't that there is something wrong with the onsubmit event handler, it's exactly the right event handler, the issue is syntax errors in the code, and using the wrong case on the events etc, so the answer is misleading. – adeneo Jun 28 '13 at 19:09
@adeneo and pvnarula; Guys I do agree that in theory that is the case. But modern browsers are capable of figuring this out. Check this fiddle out: http://jsfiddle.net/ZBzux/1/ Like you can see no matter whether you hit the return key with focus in the textbox or click the submit button, the function is fired nonetheless. – reggaemahn Jun 28 '13 at 19:18

Javascript - Form still submits after error message

2 Answers2