Header Ads Widget

Ticker

6/recent/ticker-posts

Validación de JavaScript mediante un formulario de muestra

 La validación de un formulario utilizando JavaScript del lado del cliente se utiliza para validar los campos de entrada del usuario del formulario. Se implementa para evitar dejar campos de entrada en blanco o ingresar caracteres no válidos en el cuadro de entrada. En html 5, validar los campos de entrada se vuelve fácil debido a algunas actualizaciones. En el cuadro de entrada, cuando utilizamos el atributo "obligatorio", el usuario puede dejarlo vacío. Para el cuadro de entrada de correo electrónico, solo puede establecer el tipo de entrada = "correo electrónico" y verificará "@" y "." en el correo electrónico ingresado.

En este artículo sobre, veremos el proceso de validación de formularios. Cuando se envía el formulario onsubmit, se activa una llamada a la función y devuelve el proceso de validación al verificar el valor de entrada de cada usuario para el cuadro de texto. Aquí, mediante el selector de ID, obtenemos el valor de cada cuadro de entrada para validar y devolver su estado utilizando el controlador onsubmit utilizado en la función.

Validación mediante JavaScript

Demo en vivo

Veamos el fragmento en detalle:

HTML

<form method = "POST" name = "contact" onsubmit = "return formcheck ();">
  <span id = "error"> </span>
  <div class = "form-group">
       <input type = "name" class = "form-control" id = "name" placeholder = "Name">
  </div>
  <div class = "form-group">
        <input type = "email" class = "form-control" id = "email" placeholder = "Dirección de correo electrónico">
  </div>
  <div class = "form-group">
        <input type = "password" class = "form-control" id = "pass" placeholder = "Password">
  </div>
  <div class = "form-group">
        <input type = "contraseña" class = "form-control" id = "cpass" placeholder = "Confirmar contraseña">
  </div>
   <div class = "form-group">
       <textarea class = "form-control" rows = "5" placeholder = "Acerca de usted mismo" id = "message"> </textarea>
  </div>
  <div class = "form-group">
  <h5 class = "header"> Género: </h5> <div class = "gender">
    Hombre <input type = "radio" name = "gender" class = "gender male" value = "male"> </div> <div class = "gender">
	Mujer <input type = "radio" name = "gender" class = "gender" value = "female"> </div>
	</div>
	<div class = "form-group">
	<h5 class = "header"> Fecha de nacimiento: </h5>
	  <select name = "nacimiento-mes" id = "nacimiento-mes" class = "select">
          <option value = "" selected> Mes </option>
          <option value = "1"> Enero </option>
          <option value = "2"> Febrero </option>
          <option value = "3"> Mar </option>
          <option value = "4"> Abr </option>
         </select>
        & nbsp;
        <select name = "birth-day" id = "birth-day" class = "select">
          <option value = "" seleccionado> Día </option>
          <option value = "1"> 1 </option>
          <option value = "2"> 2 </option>
          <option value = "3"> 3 </option>
          <option value = "4"> 4 </option>
        </select>
        & nbsp;
        <select name = "birth-year" id = "birth-year" class = "select">
          <option value = "" selected> Año </option>
         <option value = "2013"> 2014 </option>
          <option value = "2013"> 2013 </option>
          <option value = "2012"> 2012 </option>
          <option value = "2011"> 2011 </option>
          <option value = "2010"> 2010 </option>
        </select>
        </div>
  <div class = "form-group">
    <input type = "checkbox" name = "tc" id = "tc" value = "1"> & nbsp; Acepte Término y condición <br>
</div>
  <input type = "submit" class = "btn btn-primary sub" value = "Submit">
</form> 

JavaScript

<script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js "> </script>
<script>
función formcheck ()
{

var check_email = / ^ (([^ <> () [].,;: s @ "] + (. [^ <> () [].,;: s @"] +) *) | (". + ")) @ (([[0-9] {1,3}. [0-9] {1,3}. [0-9] {1,3}. [0-9] {1,3 }]) | (([a-zA-Z-0-9] +.) + [a-zA-Z] {2,})) $ /;
	
var yname = $ ('# nombre'). val ();
var yemail = $ ('# correo electrónico'). val ();
var pass = $ ('# pass'). val ();
var cpass = $ ('# cpass'). val ();
var msg = $ ('# mensaje'). val ();
var bmonth = $ ('# mes-nacimiento'). val (); 
var bday = $ ('# día de nacimiento'). val ();
var byear = $ ('# año-nacimiento'). val (); 

si (yname == "")
{
document.getElementById ('error'). innerHTML = "¡Proporcione su nombre!";
$ ('# nombre'). focus ();
falso retorno;
}
si (yemail == "")
{
document.getElementById ('error'). innerHTML = "¡Proporcione su correo electrónico!";
$ ('# correo electrónico'). focus ();
falso retorno;
}
si (! check_email.test (yemail))
{
document.getElementById ('error'). innerHTML = "¡Ingrese un correo electrónico válido!";
$ ('# correo electrónico'). focus ();
falso retorno;
}
// Validación de contraseña
si (pasar == "")
{
document.getElementById ('error'). innerHTML = "¡Ingrese la contraseña!";
$ ('# paso'). focus ();
falso retorno;
}
si (longitud de paso <8)
{
document.getElementById ('error'). innerHTML = "¡La contraseña debe tener 8 caracteres!";
$ ('# paso'). focus ();
falso retorno;
}

si (cpass == "")
{
document.getElementById ('error'). innerHTML = "Por favor, ingrese para confirmar la contraseña";
$ ('# cpass'). focus ();
falso retorno;
}
// comprobar si la contraseña coincide
si (pasa! = cpass)
{
document.getElementById ('error'). innerHTML = "¡La contraseña no coincide!";
$ ('# cpass'). focus ();
falso retorno;
}
if (msg == "") {
document.getElementById ('error'). innerHTML = "¡Escriba el mensaje!";
$ ('# mensaje'). focus ();
falso retorno;
}
// validación del botón de radio
if ((document.contact.gender [0] .checked == false) && (document.contact.gender [1] .checked == false)) {
document.getElementById ('error'). innerHTML = "¡Por favor seleccione Sexo!";
falso retorno;
}
// validación desplegable
if (bmonth == "") {
document.getElementById ('error'). innerHTML = "Seleccione el mes de nacimiento";
falso retorno;
}
if (bday == "") {
document.getElementById ('error'). innerHTML = "Seleccione el día de nacimiento";
falso retorno;
}
if (byear == "") {
document.getElementById ('error'). innerHTML = "Seleccione el año de nacimiento";
falso retorno;
}

// validación de casilla de verificación
if (document.contact.tc.checked == false) {
document.getElementById ('error'). innerHTML = "¡Por favor, seleccione T & C!";
$ ('# tc'). focus ();
falso retorno;
}
}
</script> 

Publicar un comentario

0 Comentarios