Validating HTML form using JavaScript

Question

I know there are 2-3 similar questions are on site but the mine is very specific. So the situation is, I created a input field that validates a string if it matches /abc/ pattern (regex in javascript). But the output is very unexpected i.e., Even If i provide a input that matches the pattern then output is "Invalid input" and if i provide a input that doesn't matches the pattern then same above output. This is okay but I am unable to figure out what is what is happening when I am providing a valid input?

Here is the code:

<!DOCTYPE html>
<html>
<head>
  <title>form validation</title>
</head>
<body>

<script>
function check() {
  var field = document.getElementById("1").data;
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>
  First field:<br />
  <input type="text" id="1"> <span id="2"></span> <br />
  <button type="submit" onclick="check();">Validate</button>

</body>

</html>

Are you sure that the regex you have there does what you want it to do? What string are you using to test it against? — S.V.
– S.V., Commented Jun 26, 2018 at 11:20
@DrSatan1 you can try any string like:- "fabcuter" , it will result in "Invalid input!" but anyway the only problem was my incorrect method and Krishnas's answer worked! — dave
– dave, Commented Jun 26, 2018 at 11:29
@dave If my answer worked, you can accept it as an answer and close the question. As far as the data is concerned, do a bit of googling — Krishna Prashatt
– Krishna Prashatt, Commented Jun 26, 2018 at 11:32

Krishna Prashatt · Accepted Answer · 2018-06-26 11:20:56Z

document.getElementById("1").data

Is not a valid method. You have to use value method to obtain the data inside the input box. Try this code:

<!DOCTYPE html>
<html>
<head>
  <title>form validation</title>
</head>
<body>

<script>
function check() {
  var field = document.getElementById("1").value;
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>
  First field:<br />
  <input type="text" id="1"> <span id="2"></span> <br />
  <button type="submit" onclick="check();">Validate</button>

</body>

</html>

PS: Please do use a bit of debugging tools that the browsers provide.

Raold · Accepted Answer · 2018-06-26 11:28:06Z

0

try using .value instead of .data

<script>
function check() {
  var field = document.getElementById("1").value; //<--- here
  var regex = /abc/;
  if(regex.test(field) === true)
     document.getElementById("2").innerHTML="Input accepted";

  else
   document.getElementById("2").innerHTML="Invalid input!";
}
</script>

Now if you write "abc" its will works.

answered Jun 26, 2018 at 11:28

Raold

1,4934 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Validating HTML form using JavaScript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related