How to check for text for invalid input

Question

I'm Working with javascript and html, and i want to validate user input.

I've made it so that the user cannot enter anything empty. How would i check it so that the user will get an error prompt when they enter text? I only want numbers to be inputted.

Here is my html

<!DOCTYPE html>

<html style="background-color:DodgerBlue;">


<head>
    
<meta charset="UTF-8">

<title> Assignment 2</title>
    
</head>
    
    
<body>
    
    <img src="assignment2banner.png" alt="banner" width="1000px" height="300px">


<h1> Hello and welcome to my program. </h1>
    
    <h2>Please enter your desired row and column table size.</h2>
    
    <br>
    
<form name="table1">

    <label>Row: <input type="text" id="row"/>  </label>
<br>
    <label>Column: <input type="text"  id="col"/></label>
    
<br>

    
<input name="create" type="button" value="Create a custom table" onclick='validateForm();'/>

    
</form>

    <br>
    
<div id="container"></div>

    <script src="assignment2.js"></script>
</body>
    

    
<footer>
    <p>Created by Ildaphonse Cornolius. © 2022</p>
</footer>

    

</html>

javascript - here is my javascript

function newTable(){
    
    var columns = document.getElementById('col').value;
    var rows = document.getElementById('row').value;
    var header = '<table border="1">\n';
    var tableContainer = '';
    var footer = '';
    
    for( var x = 0; x<rows; x++)
    {
    tableContainer += '<tr>';
    for( var y = 0; y < columns; y++){
        
        tableContainer += '<td>';
        tableContainer += x + ',' + y;
        tableContainer += '</td>'
        
        
    }
        tableContainer += '</tr>\n'
        
    }
    
    footer = '</table>';
    
    document.getElementById('container').innerHTML = header + tableContainer + footer;
    
    
}

function validateForm() {
          
     var a = document.getElementById('col').value;
    var b = document.getElementById('row').value;
    
      if (a == "") {
          alert("All forms must be filled out");
          return false;
      }
     
      if (b == "") {
          alert("All forms must be filled out");
          return false;
      }

     
      newTable();
      return true;
  }

Does this answer your question? [HTML text input allow only numeric input](https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — Juan, Jun 04 '22 at 02:28
@Juan it's a bit OTT, but what if user inspects the page and changes the type to text?? Manual validation would still need to be used... — Joey M, Jun 04 '22 at 02:29
@JoeyM In the first place, validation should also be done server-side. An user can always bypass any client-side checks. — SuperStormer, Jun 04 '22 at 02:31
@SuperStormer I see, this is a college level course and our teacher didnt teach us server side checking, but you are right on that. I will have to look into it. — Ilda, Jun 04 '22 at 02:41

score 1 · Answer 1 · answered Jun 04 '22 at 02:34

I updated your JavaScript function to check if the user's input is a number or not.

function validateForm() {
    
  // Good practise to use CONST with variables that are never changed
  const a = document.getElementById('col').value;
  const b = document.getElementById('row').value;


  // I made it an OR statement... Less mode is more :)
  // +1 for using a guard clause
  if (a == "" || b == "") {
      alert("All forms must be filled out");
      return false;
  }

  // Another guard clause that checks if its NotANumber
  if (isNaN(a) || isNaN(b)) {
      alert("Numbers only!");
      return false;
  }
    
  newTable();
  return true;
}

The code comments explains what's actually happening

Hope this helped :)

I'm not sure if my earlier comment got deleted. But, thank you so much, i've always wondered if i can check for NaN. Blessings to you! — Ilda, Jun 04 '22 at 02:46
You're welcome @Ilda! Yes it appears both our comments got removed haha — Joey M, Jun 04 '22 at 02:49

score 1 · Accepted Answer · answered Jun 04 '22 at 02:35

1

Change your input's type to number:

<input type="number" min="0"/>

Users won't be able to input letters.

answered Jun 04 '22 at 02:35

Layhout

1,445
1
3
16

But if the user inspects the page and changes the markup to `type="text"`, the page will break... We **can** use this, but we should still validate the form for good practice in JavaScript too – Joey M Jun 04 '22 at 02:36

How to check for text for invalid input

2 Answers2