How to check for text for invalid input-CodePudding

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

CodePudding user response：

Change your input's type to number:

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

Users won't be able to input letters.

CodePudding user response：

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