javascript form validation does not write html code as expected

Question

I am trying to integrate a javascript form validation into a pet project of mine and am stumbling over this:

function validateForm() {

  if (this.firstname.value == "") {

    document.getElementById("testingline").innerHTML = '<div class="alert alert-danger alert-dismissable"><span>'+missing+'</span></div>';
    this.firstname.focus();

    return false;
  }

  return true;
}

If the line document.getElementById is omitted, the form is not submitted on click, while with the line the form is submitted.

What am I doing wrong?

The function is called through this:

 <form name="helperform" role="form" method="get" action="thanks.php"
    onsubmit="return validateForm(this)">

and the line should be added to this:

<div class="col-md-6 col-md-offset-3" id="testingline" name="testline"></div>

Thanks for helping!

Daniel

Please also return true at the end to allow the submission once you fixed the DOM/jQuery mix you have. BTW If you pass (this) in the validateForm(this) you do not need to name the form — mplungjan, Mar 09 '14 at 16:29
@mplungjan: There's no need to return `true`. Good point about passing in `this`. — T.J. Crowder, Mar 09 '14 at 16:45
Yes there is. Some browsers will complain (function does not always return a value) and in any case it is good documentation to show that the idea is to allow the submission at the end — mplungjan, Mar 09 '14 at 17:13
thx, I did not think about that. I added that. Doesn't change the problem though :-D — Kazschuri, Mar 09 '14 at 18:51
@mplungjan: No *browser* will complain that the function doesn't always return a value. Some lint tools might, but that's not the same thing at all. `return true` has exactly zero meaning in a DOM0 event handler, so including it is pointless code. — T.J. Crowder, Mar 09 '14 at 18:56
http://stackoverflow.com/a/20915520/295783 - I believe I have see the error in Firefox. I do not consider it pointless to return true in an event handler that will stop execution if false is returned to show that we intend the submit to take place. — mplungjan, Mar 10 '14 at 14:55

T.J. Crowder · Accepted Answer · 2014-03-09T18:53:47.373

3

DOM elements don't have a function called html. You can set their contents using the property innerHTML, like this:

document.missing_placeholder.innerHTML = '<div class="alert alert-danger alert-dismissable"><span>'+Du hast was vergessen+'</span></div>';

But separately, note that you've ended the quotes too early, so your Du hast was vergessen is not in a string. So to fix that:

document.missing_placeholder.innerHTML = '<div class="alert alert-danger alert-dismissable"><span>Du hast was vergessen</span></div>';

Additionally, you haven't shown how you're defining the element you've called document.missing_placeholder above, but document.missing_placeholder is probably wrong. If you're defining it with an id, use document.getElementById("missing_placeholder") instead (although window.missing_placeholder may work).

The html function you see used frequently is from an add-on library, typically jQuery. But even if you were using jQuery, to use it, you'd have to get a jQuery wrapper for the element first:

$(/* document.missing_placeholder or whatever*/).html('<div class="alert alert-danger alert-dismissable"><span>Du hast was vergessen</span></div>');

But again, that's only if you're using jQuery.

edited Mar 09 '14 at 18:53

answered Mar 09 '14 at 16:26

T.J. Crowder

1,031,962
187
1,923
1,875

Ok, it seems I mixed something there. I tried to just use javascript without anything else. I now changed the line to .getElementById("testingline").innerHTML but to no avail. I edited the Example above. The problem persists, that this line seems to make the statement true. – Kazschuri Mar 09 '14 at 18:52
@ Kazschuri: Okay, so the first code example is what you need. BTW, I just noticed that you had a quotes issue as well, which I've noted and fixed in the above. – T.J. Crowder Mar 09 '14 at 18:54
I noticed the quotes too :-D that is fixed and I use your line of document.testingline.innerHTML But the form still keeps submitting its content, as long as this line is there. Works fine if I substitute that line with an alert. – Kazschuri Mar 09 '14 at 19:08
@Kazschuri: Did you read the *rest* of the answer? About how `document.whatsit` was probably wrong? And what to do about that? – T.J. Crowder Mar 09 '14 at 19:40
document.getElementByID did not work. I edited that in the above example. I did not try window.testingline(was missing_placeholder) and did that now. that worked. Thx! What is the convention here how to mark the right answer for everyone? – Kazschuri Mar 09 '14 at 20:01
@Kazschuri: It's `getElementById` not `getElementByID`. Case is significant. – T.J. Crowder Mar 09 '14 at 22:00

javascript form validation does not write html code as expected

1 Answers1