La manera más sencilla de validar tus formularios

Validando los campos de tus formularios HTML te asegurarás de que tus usuarios ingresen los datos en el formato y de la manera correcta. Antiguamente, para validar el contenido de los campos de un formulario HTML necesitábamos plugins de Javascript, pero hoy en día la mayoría de navegadores cuentan con soluciones integradas con las que gestionar la validación de los campos de un formulario.

En este tutorial, te mostraremos cómo agregar reglas de validación a tus formularios, utilizando únicamente atributos nativos.

Para mostrar el proceso de creación de reglas de validación, crearemos un sencillo formulario de registro HTML utilizando Bootstrap 4.

Layout

HTML

Nuestro diseño consistirá en un formulario Bootstrap con un par de campos input y un botón submit. Para este ejemplo, utilizaremos 3 tipos de campos input diferentes: un campo de texto, un campo password y un campo email.

<div class="registration-form">
    <form>
        <h3 class="text-center">Create your account</h3>
        <div class="form-group">
            <input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block create-account" type="submit">Create Account</button>
        </div>
    </form>
</div>

CSS

Le hemos dado algo de estilo al formulario para que sea un poco más agradable a la vista.

html {
  background-color:#214c84;
  background-blend-mode:overlay;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(../../assets/img/image4.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
}

body {
  background-color:transparent;
}

.registration-form {
  padding:50px 0;
}

.registration-form form {
  max-width:800px;
  padding:50px 70px;
  border-radius:10px;
  box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
  background-color:#fff;
}

.registration-form form h3 {
  font-weight:bold;
  margin-bottom:30px;
}

.registration-form .item {
  border-radius:10px;
  margin-bottom:25px;
  padding:10px 20px;
}

.registration-form .create-account {
  border-radius:30px;
  padding:10px 20px;
  font-size:18px;
  font-weight:bold;
  background-color:#3f93ff;
  border:none;
  color:white;
  margin-top:20px;
}

@media (max-width: 576px) {
  .registration-form form {
    padding:50px 20px;
  }
}

Reglas de validación

HTML5 nos proporciona una forma sencilla de validar campos inline utilizando los atributos de los campos inputs. Existe una gran cantidad de atributos que puedes utilizar. En este artículo solamente echaremos un vistazo a los más comunes. Para ver la lista completa, puedes visitar esta excelente guía de MDN.

required

Este atributo define que el campo dinput no puede estar vacío. Es decir, obliga al usuario a completar el campo si quiere enviar el formulario.

<input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>

maxlength y minlength

Especifica el número máximo / mínimo de caracteres que el usuario puede ingresar en el campo input. Esto es especialmente útil en los campos para contraseñas donde una contraseña más larga significa una contraseña más segura.

<input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>

pattern

Define una expresión regular que debe coincidir con el contenido ingresado por el usuario. Se puede utilizar con los siguientes input: text, search, url, email y password. Si no estás familiarizado con las expresiones regulares, puede consultar nuestro tutorial Aprende a crear expresiones regulares en 20 minutos.

<input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>

Validación de formularios en Bootstrap Studio

Bootstrap Studio también te ofrece una manera sencilla de validar tus formularios sin tener que escribir ni una sola línea de código. La aplicación cuenta con controles integrados que te permiten configurar rápidamente todas las reglas de validación que puedas necesitar. 

Si quieres más información sobre cómo validación los formularios de tus proyectos, dirígete al sitio web de Bootstrap Studio.