Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Validación de formulario con javascript

En un formulario de registro de usuario, hay ciertas reglas que desea que sus usuarios sigan al ingresar valores para registrarse en su sitio. Algunas de esas reglas incluyen:
  • Algunos campos de entrada no pueden estar vacíos
  • Algunos valores deben estar en un rango de longitud particular
  • Algunos campos de entrada deben coincidir (por ejemplo, campos de contraseña)
Hay muchas más reglas, pero dejémoslas en estas reglas básicas. En este tutorial, vamos a realizar la validación del formulario en todos los campos de entrada relacionados con las reglas que acabamos de enumerar.
Cree tres archivos y asígneles un nombre:
  • registrarse.php
  • index.php
  • scripts.js
  • style.css
Coloque este código en  register.php:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form validation with JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrapper">
   <form method="POST" action="index.php" onsubmit="return Validate()" name="vform" >
    <div id="username_div">
      <label>Username</label> <br>
      <input type="text" name="username" class="textInput">
      <div id="name_error"></div>
    </div>
    <div id="email_div">
      <label>Email</label> <br>
      <input type="email" name="email" class="textInput">
      <div id="email_error"></div>
    </div>
    <div id="password_div">
      <label>Password</label> <br>
      <input type="password" name="password" class="textInput">
    </div>
    <div id="pass_confirm_div">
       <label>Password confirm</label> <br>
       <input type="password" name="password_confirm" class="textInput">
       <div id="password_error"></div>
    </div>
    <div>
    <input type="submit" name="register" value="Register" class="btn">
    </div>
   </form>
  </div>
</body>
</html>
<script type="scripts.js"></script>
Ahora agreguemos estilo. En style.css, pegue este código:
#wrapper {
  width: 30%;
  margin: 50px auto;
  padding: 50px;
  background: #D7FBFF;
}
form {
  margin: 30px auto;
}
.textInput {
  border: none;
  height: 28px;
  margin: 2px;
  border: 1px solid #6B7363;
  font-size: 1.2em;
  padding: 5px;
  width: 95%;
}
.textInput:focus {
  outline: none;
}
.btn {
  width: 98.6%;
  border: none;
  margin-top: 5px;
  color: white;
  background-color: #3b5998;
  border-radius: 5px;
  padding: 12px;
}
Ahora, este es el archivo en el que se realiza la validación real, los scripts.css:
// SELECTING ALL TEXT ELEMENTS
var username = document.forms['vform']['username'];
var email = document.forms['vform']['email'];
var password = document.forms['vform']['password'];
var password_confirm = document.forms['vform']['password_confirm'];
// SELECTING ALL ERROR DISPLAY ELEMENTS
var name_error = document.getElementById('name_error');
var email_error = document.getElementById('email_error');
var password_error = document.getElementById('password_error');
// SETTING ALL EVENT LISTENERS
username.addEventListener('blur', nameVerify, true);
email.addEventListener('blur', emailVerify, true);
password.addEventListener('blur', passwordVerify, true);
// validation function
function Validate() {
  // validate username
  if (username.value == "") {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Username is required";
    username.focus();
    return false;
  }
  // validate username
  if (username.value.length < 3) {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Username must be at least 3 characters";
    username.focus();
    return false;
  }
  // validate email
  if (email.value == "") {
    email.style.border = "1px solid red";
    document.getElementById('email_div').style.color = "red";
    email_error.textContent = "Email is required";
    email.focus();
    return false;
  }
  // validate password
  if (password.value == "") {
    password.style.border = "1px solid red";
    document.getElementById('password_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.textContent = "Password is required";
    password.focus();
    return false;
  }
  // check if the two passwords match
  if (password.value != password_confirm.value) {
    password.style.border = "1px solid red";
    document.getElementById('pass_confirm_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.innerHTML = "The two passwords do not match";
    return false;
  }
}
// event handler functions
function nameVerify() {
  if (username.value != "") {
   username.style.border = "1px solid #5e6e66";
   document.getElementById('username_div').style.color = "#5e6e66";
   name_error.innerHTML = "";
   return true;
  }
}
function emailVerify() {
  if (email.value != "") {
   email.style.border = "1px solid #5e6e66";
   document.getElementById('email_div').style.color = "#5e6e66";
   email_error.innerHTML = "";
   return true;
  }
}
function passwordVerify() {
  if (password.value != "") {
   password.style.border = "1px solid #5e6e66";
   document.getElementById('pass_confirm_div').style.color = "#5e6e66";
   document.getElementById('password_div').style.color = "#5e6e66";
   password_error.innerHTML = "";
   return true;
  }
  if (password.value === password_confirm.value) {
   password.style.border = "1px solid #5e6e66";
   document.getElementById('pass_confirm_div').style.color = "#5e6e66";
   password_error.innerHTML = "";
   return true;
  }
}
Y eso es todo sobre el código. Ahora para ejecutar esto, copie el código en una carpeta dentro de la carpeta htdocs o www de su instalación de PHP e inicie sesión en su navegador y ejecútelo. Una vez que se muestra la página, intente ingresar algunos valores y juegue con la validación. 
Espero que esto le sea útil. Recuerde que siempre puede apoyarnos compartiendo.
¡Disfruta el resto de tu dia!

También podría gu

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas