Untitled

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form validator</title>
  
  
<link rel="stylesheet" type="text/css" href="style.css">

  
  
  
  <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script>

// Cuando éste todo listo
$(function() {
			/*$.validator.addMethod("email", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9\._-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,4}$/.test(value);//vemos si esta en blanco y luego comprobamos si es un formato correcto de email
            });*/
  // Validamos el formulario con nombre='registration'
  $("form[name='registration']").validate({
    // Especificamos las reglas
    rules: {
      // En la parte izquierda escribimos el nombre que aparecen en los input y le decimos que son obligatorios
      nombre: "required",
      apellidos: "required",
      email: {
        required: true,
        // Especificamos que el campo email debe de aplicar estructura email
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Especificamos losmensajes de error para cada caso
    messages: {
      nombre: "Por favor, introduzca su nombre",
      apellidos: "Por favor, introduzca su apellido",
      password: {
        required: "Por favor proporcione una contraseña",
        minlength: "Su contraseña debe tener al menos 5 caracteres."
      },
      email: "Por favor, introduce una dirección de correo electrónico válida"
    },
	//Si todo es correcto enviamos el formulario
    submitHandler: function(form) {
      form.submit();
    }
  });
});
  </script>
</head>
<body>
 	<main>
  <h2 class="title">Registrarme</h2>
  <form action="#" name="registration">

    <label for="nombre">Nombre</label>
    <input type="text" name="nombre" id="nombre" placeholder="Tunombre">

    <label for="apellidos">Apellidos</label>
    <input type="text" name="apellidos" id="apellidos" placeholder="Tusapellidos">

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="prueba@mail.com">

    <label for="password">Contraseña</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;">

    <button type="submit">Registrarme</button>
  </form>
</main>
  
 
</body>
</html>
Editor is loading...