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;
}
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 :)
Change your input's type to number:
<input type="number" min="0"/>
Users won't be able to input letters.