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
– Pointy, Commented Sep 8, 2015 at 13:08
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
– Valeria Melinte, Commented Sep 8, 2015 at 13:12
Forms have an elements collection that is all the controls in the form. You can iterate over that for validation. — RobG
– RobG, Commented Sep 9, 2015 at 10:15

Rayon · Accepted Answer · 2015-09-08 13:24:02Z

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 8, 2015 at 13:24

answered Sep 8, 2015 at 13:17

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

5 Comments

Valeria Melinte Over a year ago

thank you, it works. Can you explain why you used 'onkeyup="validation(this)" ' ? why "(this)" ?

Rayon Over a year ago

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

Valeria Melinte Over a year ago

I have more, that's why I'm using classes

Rayon Over a year ago

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.

Valeria Melinte Over a year ago

Let us continue this discussion in chat.

Muhammad Usman · Accepted Answer · 2015-09-08 13:08:10Z

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 8, 2015 at 13:08

Muhammad Usman

1,3625 gold badges19 silver badges35 bronze badges

3 Comments

ElGavilan Over a year ago

This could still be error prone if he has other elements that share that class name.

Rayon Over a year ago

What if there are multiple input boxes with multiple error message containers ?

Muhammad Usman Over a year ago

yes but by given code we can solve this by using it .

Collectives™ on Stack Overflow

javascript form validation

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related