0

Me explico, tengo un formulario de clientes que tiene datos de la empresa. El formulario tiene campos obligatorios (los datos personales del cliente) y tengo datos no obligatorios(los datos de la empresa, los cuales pueden estar vacíos). El problema aquí es que al registrar o actualizar el cliente puede tener campos vacíos (obviamente), pero al querer registrar por ejemplo uno, el campo"empresa", la validación del formulario pide que llene el siguiente, por ejemplo, el campo "direccion", y no sé como estructurar los ciclos if que tengo. Espero me haya explicado bien.

Aquí la función javascript del form:

function validarform()
  {
    var datosCorrectos=true;
    var error="";
    //Clientes
    nombre = document.getElementById("txtnombre").value;
    numero = document.getElementById("txtnumero").value;
    tipo = document.getElementById("cmbtipo").value;
    estado = document.getElementById("txtestado").value;
    telefono = document.getElementById("txttelefono").value;                     
    email = document.getElementById("txtemail").value;
    direccion = document.getElementById("txtdireccion").value;
    //Empresa
    empresa = document.getElementById("txtempresa").value;
    fdireccion = document.getElementById("txtfdireccion").value;
    fciudad = document.getElementById("txtfciudad").value;

    var exp = /^(([^<>()\[\]\\.,;:\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,}))$/;
    //datos del cliente
    if(nombre== "" && telefono == "" && numero == "" &&tipo==""&&estado==""&&direccion==""&&email=="")
    { 
      document.getElementById("txtnombre").style.borderColor="red";
      document.getElementById("txtnumero").style.borderColor="red";
      document.getElementById("cmbtipo").style.borderColor="red";
      document.getElementById("txtestado").style.borderColor="red";
      document.getElementById("txttelefono").style.borderColor="red";
      document.getElementById("txtemail").style.borderColor="red";
      document.getElementById("txtdireccion").style.borderColor="red";
      datosCorrectos=false;
      error="\n Esta vacio el formulario";
    }

    else if (nombre == "") 
    { 
      document.getElementById("txtnombre").focus();
      document.getElementById("txtnombre").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo nombre";
    }
    else if (nombre.length < 10) 
    {
      document.getElementById("txtnombre").focus();
      document.getElementById("txtnombre").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo nombre debe de tener mas de 10 caracteres";
    }
     else if (numero == "") 
    { 
      document.getElementById("txtnumero").focus();
      document.getElementById("txtnumero").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo numero";
    }

    else if (numero.length < 10) 
    {
      document.getElementById("txtnumero").focus();
      document.getElementById("txtnumero").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo numero debe de tener 10 digitos";
    }

    else if (tipo == "") 
    {
      document.getElementById("cmbtipo").focus();
      document.getElementById("cmbtipo").style.borderColor="red";
      datosCorrectos=false;
      error="\n Seleccione un tipo de licencia";
    }

    else if (estado == "") 

    {
      document.getElementById("txtestado").focus();
      document.getElementById("txtestado").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo estado";
    }

    else if (estado.length < 10) 
    {
      document.getElementById("txtestado").focus();
      document.getElementById("txtestado").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo estado debe de tener minimo 10 caracteres";
    }

   else if (telefono == "") 
    { 
      document.getElementById("txttelefono").focus();
      document.getElementById("txttelefono").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo telefono";
    }

    else if (telefono.length < 10) 
    {
      document.getElementById("txttelefono").focus();
      document.getElementById("txttelefono").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo telefono debe de tener 10 digitos";
    }

     else if (email == "") 
    { 
      document.getElementById("txtemail").focus();
      document.getElementById("txtemail").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo correo";
    }

    else if(!exp.test(document.getElementById("txtemail").value))
    {
      document.getElementById("txtemail").focus();
      document.getElementById("txtemail").style.borderColor="red";
      datosCorrectos=false;
      error="\n Email Invalido";
    }

     else if (direccion == "") 
    { 
      document.getElementById("txtdireccion").focus();
      document.getElementById("txtdireccion").style.borderColor="red";
      datosCorrectos=false;
      error="\n Llene el campo direccion";
    }

     else if (direccion.length < 20 ) 
    { 
      document.getElementById("txtdireccion").focus();
      document.getElementById("txtdireccion").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo direccion debe de tener mas 20 caracteres ";
    }
      //Aqui empiezan los datos de la empresa
     else if (empresa.length < 5 ) 
      { 
      document.getElementById("txtempresa").focus();
      document.getElementById("txtempresa").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo empresa debe de tener mas 5 caracteres ";
    }
     else if (fdireccion.length < 20 ) 
    { 
      document.getElementById("txtfdireccion").focus();
      document.getElementById("txtfdireccion").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo direccion (empresa) debe de tener mas 20 caracteres ";
    }

     else if (fciudad.length < 4 ) 
    { 
      document.getElementById("txtfciudad").focus();
      document.getElementById("txtfciudad").style.borderColor="red";
      datosCorrectos=false;
      error="\n El campo ciudad (empresa) debe de tener mas 4 caracteres ";
    }


    //Aqui manda el mensaje diciendo el error
    else(!datosCorrectos)
    {

      alert('El formulario dice:' + error);
    }
    //formulario es enviado como valido
    return datosCorrectos;

  }
6
  • 1
    Hola, es interesante que realices tu propia función de validación. Sin embargo, en tu validación no veo nada diferente a lo que HTML5 ya hace por ti. En todo caso, te sugiero que uses la validación de HTML5, y luego uses tu propia validación para los casos más específicos, por ejemplo, cuando un teléfono deba tener un símbolo +. Así te quitas bastante de tu código actual y te enfocas en esos casos más especiales. Puedes ver Validar solo letras para un ejemplo. Commented el 24 ene. 2019 a las 6:32
  • También puedes ver Validar un número telefónico y Código para validar un formulario con Javascript Commented el 24 ene. 2019 a las 6:34
  • mmm gracias, sé que puedo usar html5, pero como es un trabajo académico si necesito algo de ayuda con esto, por mi ya lo hubiera acabado xD Commented el 24 ene. 2019 a las 6:35
  • 2
    Reformula tu pregunta y pones "no puedo usar validación de HTML5", así la pregunta tendrá más sentido. Commented el 24 ene. 2019 a las 6:37
  • Si decides validar tu formulario con javascript por favor no olvides validarlo también mediante un script del lado del servidor como php (por ejemplo). JavaScript puede ser deshabilitado fácilmente, por lo cual no hay que confiar demasiado en la validación con JavaScript.
    – enxaneta
    Commented el 24 ene. 2019 a las 9:40

2 respuestas 2

0

para semplificar tu ciclo de if, en este caso evitaria el if ... else if .. porque mas campos tenes mas aumentan las condiciones, te diria de hacer un simple if para cada campo que necesites validar.

te dejo un ejemplo funcionante de la estructura:

var ej1,ej2,ej3,ej4,ej5,boton,retorno;

ej1 = document.getElementById("ej1");
ej2 = document.getElementById("ej2");
ej3 = document.getElementById("ej3");
ej4 = document.getElementById("ej4");
ej5 = document.getElementById("ej5");
boton = document.getElementById("boton");


boton.addEventListener("click", function(){
  if(validar()){
     document.getElementById("miform").submit();
  }
});

function validar(){
  retorno = true;
  ej1.style.borderColor = "";
  ej2.style.borderColor = "";
  ej3.style.borderColor = "";
  ej4.style.borderColor = "";
  ej5.style.borderColor = "";
  if(ej1.value.trim() == ""){
     console.log("ej1 vacio");
     ej1.style.borderColor = "red";
     retorno = false;
  }
   if(ej2.value.trim() == ""){
     console.log("ej2 vacio");
     ej2.style.borderColor = "red";
     retorno = false;
  }
   if(ej3.value.trim() == ""){
     console.log("ej3 vacio");
     ej3.style.borderColor = "red";
     retorno = false;
  }
   if(ej4.value.trim() == ""){
     console.log("ej4 vacio");
     ej4.style.borderColor = "red";
     retorno = false;
  }
   if(ej5.value.trim() == ""){
     console.log("ej5 vacio");
     ej5.style.borderColor = "red";
     retorno = false;
  }
  console.log("retorno : " + retorno)
  return retorno;
}
<form method="GET" action="#" id="miform">
  <input type="text" id="ej1">
  <input type="text" id="ej2">
  <input type="text" id="ej3">
  <input type="text" id="ej4">
  <input type="text" id="ej5">
  <input type="button" value="enviar" id="boton">
</form>

este es el metodo que estoy utilizando en mi trabajo de diploma para validar los datos, espero que te sea de ayuda.

exitos!

1
  • gracias por la sugerencia! Commented el 24 ene. 2019 a las 17:16
0

Hola creo que con tanto else if te has liado. Las validaciones las tienes bien pero el último trozo no.

Esto:

//Aqui manda el mensaje diciendo el error
else(!datosCorrectos)
{

  alert('El formulario dice:' + error);
}
//formulario es enviado como valido
return datosCorrectos;

Debería ser mas como esto:

 //Aqui manda el mensaje diciendo el error 
if (error!='') {
      alert('El formulario dice:' + error);
}else{
      return true;
}

En tu código siempre llega a "return datosCorrectos;" y solo a "else(!datosCorrectos)" cuando el resto de validaciones son correctas.

Con este código te ahorras la variable "datosCorrectos".

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.