Validando formulario con jQuery

8
4063

Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hacer uso de este pequeño tutorial que nos enseña a validar el contenido de los campos de un formulario.

 Validacion de campos de formulario

¿Cómo hacerlo?

  1. Descargar e incluye jquery.js.
  2. HTML: En la etiqueta form, incluye onSubmit="return checkForm(this);".
  3. HTML: En la etiqueta del campo de entrada (input), incluye onblur="checkField(this);".
  4. HTML: Asigna un Identificador a los campos (atributo id). Estos se usará para identificar los campos en el código JavaScript.
  5. Javascript: Actualiza la función checkFieldTask() con tus campos.
  6. Javascript: Configura demo_mode=false.

HTML

<p id="instructions">Deja los campos en blanco y presiona tab o enviar y se reportará un error.</p>

<form action="#" method="post" name="myform" id="myform" onSubmit="return checkForm(this);">

<label for="field1">Campo 1</label>
<input name="field1" id="field1" type="text" value="" onblur="checkField(this);" /><br />

<label for="field2">Campo 2</label>
<input name="field2" id="field2" type="text" value="" onblur="checkField(this);" /><br />

<br /><input name="subbtn" id="subbtn" type="submit" value="Enviar Data" />

</form>

JavaScript

var demo_mode = true; // set to false to allow form submit

function checkFieldTask (aFieldName) {
var bool = true;
switch (aFieldName) {
/*
checkFieldTask() customization instructions:

1. Hacer un nuevo "case" por cada campo que deseas validar.
2. Coloca tu validacion dentro de la sentencia "if"
3. Llama la funcion "failField" cuando la validacion falla, muestra un mensaje de error.
4. Configurar la variable "bool=false" cuando la validacion falló.
5. Llama la funcion "passField" cuando la validacion fue correcta.
*/
case "field1":
if ($("#"+aFieldName).val()=="") {
failField(aFieldName,"Error message for Field 1.");
bool = false;
} else {
passField(aFieldName);
}
break;
case "field2":
if ($("#"+aFieldName).val()=="") {
failField(aFieldName,"Error message for Field 2.");
bool = false;
} else {
passField(aFieldName);
}
break;
}
return bool;
}
function checkField (aField) {
return checkFieldTask(aField.name);
}
function checkForm (aForm) {
var bool = true;
for (var i=0; i < aForm.elements.length; i++) {
if (!checkFieldTask(aForm.elements[i].name)) {
bool = false;
}
}
if (bool) {
passField("subbtn");
if (demo_mode) {
$("#myform").hide(250);
$("#instructions").html('Buen trabajo. <a href="#" onclick="demoShowForm();return false;">Mostrar formulario nuevamente</a>');
return false;
}
} else {
failField("subbtn","Por favor resuelva este error antes de continuar.");
}
return bool;
}
function passField (aFieldName) {
$("#form_alert_"+aFieldName+"_msg").remove();
}
function failField (aFieldName,msg) {
$("#form_alert_"+aFieldName+"_msg").remove(); // in case there are any from last time
$("#"+aFieldName).after(alertMsgHTML(aFieldName,msg));
}
function alertMsgHTML (aFieldName, msg) {
return '<div id="form_alert_'+aFieldName+'_msg" class="form_alert_msg">'+msg+'</div>';
}
function demoShowForm () {
$("#instructions").text("Deja los campos en blanco y presiona tab o enviar y se reportará un error.");
$("#myform").show(250);
}
$(document).ready(function(){
document.myform.field1.focus();
});

CSS

.form_alert_msg {
font-size: 14px;
font-weight: bold;
color: #990000;
display:inline;
background-color: #FFFFCC;
padding: 2px 5px;
margin-left: 5px;
border-top: 1px solid #990000;
border-right: 2px solid #990000;
border-bottom: 1px solid #990000;
border-left: 2px solid #990000;
}

Vía DavidVanVickle

8 COMENTARIOS

  1. Saludos

    He estado buscando algo como lo que expones, con sentencias If ya que los validadores default como vienen de jQuery validan o todo o nada.

    Pero para formularios donde unos campos (que igual vigila el validador) avise de que deben llenarse u omitir su llenado en base a una decision previa no lo hacen. Por eso este tipo de codigo se perfila por otro tipo de necesidades, como mi caso.

    Tengo un Formulario que deben llenar 3 tipos de usuario. Los primero s10 campos los llenan igual, pero luego hay otros campos que se llena dependiendo del tipo de usuario que se indico que es, en un select.

    Yo he cambiado un poco el codigo (el cual funciona bien) pero no he podido hacer que funcione otras validaciones:

    case «confirmar_cedula»:
    if ($(«#»+CampoNombre).val()==»»){
    failField(CampoNombre,»Este campo no puede estar vacio»);
    vacio = false;
    } else if ($(«#»+CampoNombre).val()!=$(«#cedula»).val()){
    ailField(CampoNombre,»No coincide con la cedula, verifica»);
    vacio = false;
    } else {
    passField(CampoNombre);
    }
    break;

    Ademas de que valide que este lleno el campo (no vacio), como seria por otros If para que realiza otros casos:

    – Que un campo sea igual al previo (ej: clave, confirmarclave).
    – Que un campo sea minimo X cantidad de caracteres y no maximo a X cantidad de caracteres.
    – Que el ingreso del correo sea valido.
    – Que el campo sea netamente numerico o fecha.
    – Que valida unos campos si una variable es igual a X dato.

    Me interesa mucho lo ultimo, por mi situacion del caso del Form de 3 usuarios.

    Muy buen material, muchas gracias por compartirlo, saludos 🙂

  2. Perdon si sirvio el que sea igual a un campo previo, tenia mal escrito el failField() ahi se ve.

    Pero en todo caso, por favor, si fuese posible enriquecer mas la funcionalidad de dicho codigo para que hagan las demas validaciones mencionadas en el otro comentario, seria fabuloso, seria muy usado 😀

    Son solo una sugerencias para mejorar la funcionalidad de estos ejemplos.

    Un cordial saludo.

  3. «tutorial que nos enseña a validar el contenido de los campos de un formulario.»

    Este método solo funciona para validar si hay campos vacíos, el posteador de esto debió haber hecho esa aclaración… muchos vienen y toman este código como bueno y no se fijan en que no esta completo.

  4. Me ha servido… muchisimo! Gracias por tu aporte, soy nueva validando formularios antes de enviarlos, y tengo un caso muy particular en el que debo validar campos que vienen de una pagina JSP, ningun validor me sirve porque no sabia como cargar el JS de la pagina que cargaba… en fin.. finalmente con tu aporte tuve una genial idea y pude solucionar mi problema GRACIAS!!!!

Comments are closed.