How to check for text for invalid input

June 4, 2022

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;
  }