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
– mplungjan, Commented Mar 9, 2014 at 16:29
@mplungjan: There's no need to return true. Good point about passing in this. — T.J. Crowder
– T.J. Crowder, Commented Mar 9, 2014 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
– mplungjan, Commented Mar 9, 2014 at 17:13
thx, I did not think about that. I added that. Doesn't change the problem though :-D — Kazschuri
– Kazschuri, Commented Mar 9, 2014 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
– T.J. Crowder, Commented Mar 9, 2014 at 18:56

T.J. Crowder · Accepted Answer · 2014-03-09 18:53:47Z

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 9, 2014 at 18:53

answered Mar 9, 2014 at 16:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

Kazschuri Over a year ago

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.

T.J. Crowder Over a year ago

@ 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.

Kazschuri Over a year ago

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.

T.J. Crowder Over a year ago

@Kazschuri: Did you read the rest of the answer? About how document.whatsit was probably wrong? And what to do about that?

Kazschuri Over a year ago

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?

|

Collectives™ on Stack Overflow

javascript form validation does not write html code as expected

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related