SCR18Proporcionar validación y alerta en el lado del cliente

Comprobar un único control con un manejador de eventos

El siguiente script comprobará que se ha introducido una fecha válida en el control de formulario.

<label for="date">Date:</label>
<input type="text" name="date" id="date" 
  onchange="if(isNaN(Date.parse(this.value))) 
  alert('This control is not a valid date. 
  Please re-enter the value.');">

Comprobar varios controles cuando el usuario envía el formulario

El siguiente ejemplo muestra varios controles en un formulario. El elemento form utiliza el atributo onsubmit, que crea un manejador de eventos para ejecutar el script de validación cuando el usuario intenta enviar el formulario. Si la validación tiene éxito, el evento devuelve true y el envío del formulario continúa; si la validación encuentra errores, muestra un mensaje de error y devuelve false para cancelar el intento de envío, de modo que el usuario pueda corregir los problemas.

Código del script:

function validate() {
  // initialize error message
  var msg = "";
  //validate name
  var pattern = /^[a-zA-Z\s]+$/;
  var el = document.getElementById("name");
  if (!pattern.test(el.value)) {
    msg += "Name can only have letters and spaces. ";
  }
  // validate number
  var pattern = /^[\d\-+\.\s]+$/;
  var el = document.getElementById("tel");
  if (!pattern.test(el.value)) {
    msg += "Telephone number can only have digits and separators. ";
  }
  if (msg != "") {
    alert(msg);
    return false;
  }
  else {
  return true;
  }

Código del formulario:

<form action="multiple-controls.html" onsubmit="return validate()">
  <div>
    <label for="name">Name:</label>
    <input autocomplete="name" id="name" name="name" type="text">
  </div>
  <div>
    <label for="tel">Telephone number:</label>
    <input autocomplete="tel" id="tel" name="tel" type="tel">
  </div>
  <div>
    <input type="submit">
  </div>
</form>

Puede verse en funcionamiento en el ejemplo práctico de comprobación de varios controles cuando el usuario envía el formulario.