Estoy trabajando con javascript y html, y quiero validar la entrada del usuario.
Lo hice para que el usuario no pueda ingresar nada vacío. ¿Cómo lo verificaría para que el usuario reciba un mensaje de error cuando ingrese texto? Solo quiero que se ingresen números.
Aquí está mi 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 - aquí está mi 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; }Actualicé su función de JavaScript para verificar si la entrada del usuario es un número o no.
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; }Los comentarios del código explican lo que realmente está sucediendo.
Espero que esto haya ayudado :)
Cambie el tipo de entrada a número:
<input type="number" min="0"/>Los usuarios no podrán ingresar letras.