javascript form validation

Question

Is it something wrong with this script?

function validation() {
  var message, x;
  message = document.getElementsByClassName("message");
  message.innerHTML = "";
  x = document.getElementsByClassName("inputNumber").value;

  try { 

      if(isNaN(x)) throw "Input is not a number";

  }
  catch(err) {
      message.innerHTML = err;
  }

}

The HTML is this:

    <input type="number" class="form-control inputNumber" onkeyup="validation()" >
    <div class="help-block with-errors"></div>
    <p class="message"></p>

The console doesn't show any errors but the validation doesn't happen.

The `.getElementsByClassName()` function returns a **list** of elements. You can't treat the return value as if it were a single element. — Pointy, Sep 08 '15 at 13:08
Here are some docs on [_NodeList_](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) and [_HTMLCollection_](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) — Paul S., Sep 08 '15 at 13:09
so should I use ".getElementById()" ? What if I have more inputs that requests numbers? I can't give the same ID. Sorry, I am a beginner. — Valeria Melinte, Sep 08 '15 at 13:12
Forms have an [*elements*](http://www.w3.org/html/wg/drafts/html/master/semantics.html#dom-form-elements) collection that is all the controls in the form. You can iterate over that for validation. — RobG, Sep 09 '15 at 10:15

Rayon · Accepted Answer · 2015-09-08T13:24:02.280

1

Try this:

Just for testing purpose I have set type='text'. I have passed the current context of the input field as an argument so that I can relate other closest elements using that context.

function validation(elem) {
  var message, x;
  message = elem.nextElementSibling.nextElementSibling;
  message.innerHTML = "";
  x = elem.value;
  if (isNaN(x)) {
    message.innerHTML = "Input is not a number";
  }
}

<input type="text" class="form-control inputNumber" onkeyup="validation(this)">

<div class="help-block with-errors"></div>
<p class="message"></p>

edited Sep 08 '15 at 13:24

answered Sep 08 '15 at 13:17

Rayon

36,219
4
49
76

thank you, it works. Can you explain why you used 'onkeyup="validation(this)" ' ? why "(this)" ? – Valeria Melinte Sep 08 '15 at 13:21
@ValeriaMelinte, If you have only one text field then you can have `id` to that element and can manipulate your `DOM` using `document.getElementById(`yourId`)` – Rayon Sep 08 '15 at 13:29
I have more, that's why I'm using classes – Valeria Melinte Sep 08 '15 at 13:31
1

If you have multiple elements then you must have some identifier for your element. And this is the reason I am passing `this` as an argument to identify that element. – Rayon Sep 08 '15 at 13:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89071/discussion-between-valeria-melinte-and-rayon-dabre). – Valeria Melinte Sep 08 '15 at 13:39

score 0 · Answer 2 · answered Sep 08 '15 at 13:08

0

The .getElementsByClassName() function returns a list of elements. So you have to treat them as array Change your code with this

message = document.getElementsByClassName("message");
message[0].innerHTML = "";
 x = document.getElementsByClassName("inputNumber")[0].value;

answered Sep 08 '15 at 13:08

Muhammad Usman

1,366
5
18
33

This could still be error prone if he has other elements that share that class name. – ElGavilan Sep 08 '15 at 13:10
What if there are multiple input boxes with multiple error message containers ? – Rayon Sep 08 '15 at 13:10
yes but by given code we can solve this by using it . – Muhammad Usman Sep 08 '15 at 13:11

javascript form validation

2 Answers2