0

introducir la descripción de la imagen aquí

Este es el código:

$("#guardar").click(function(){

  if(validarFormulario()) {
    alert("exito"); 
  } else {
    alert("error");
  }		

});

//Validar Form
function validarFormulario(){
  $("#txtError_campoNombre").text("");
  $("#txtError_campoPais").text("");

  if($("#campo_nombre").val() == ""){
    $("#txtError_campoNombre").text("Debe ingresar el nombre de la Idea");
    return false;
  }

  if($("#campo_pais").val() == ""){
    $("#txtError_campoPais").text("Debe seleccionar Site");
    return false;
  }

  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
    <div class="panel-body">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="form-group">
          <label for="campo_nombre">Nombre de la Idea (*)</label>
        </div>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
        <div class="form-group">
              <input type="text" class="form-control" id="campo_nombre">        
        </div>
        <span class="span_error" id="txtError_campoNombre"></span>
      </div>
    </div>
</div>	

<div class="panel panel-default">
    <div class="panel-body">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="form-group">
          <label for="campo_pais">Site (*)</label>
        </div>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
        <div class="form-group">
              <select class="form-control" id="campo_pais">
                <option></option>
              </select>        
        </div>
        <span class="span_error" id="txtError_campoPais"></span>
      </div>
    </div>
</div>

5
  • Diego, te sigue dando el error? Veo que quitaste lo de console.log Commented el 3 ago. 2017 a las 22:50
  • @Kenny , ya listo update , si quito console.log y quiero que todos hacer un campo obligatorio Commented el 3 ago. 2017 a las 22:51
  • Disculpa, no entendi tu comentario. Aun tienes el mal funcionamiento? Es que ya probe el codigo y me funciona bien a mi. Commented el 3 ago. 2017 a las 22:56
  • no hay error y nada pero Nombre de la Idea y site tambien debe hacer un campo de un formulario obligatorio y utlimo site no funciona un campo obligatorio en js. Commented el 3 ago. 2017 a las 22:58
  • Ya actualice mi respuesta. Espero te sirva. Si resuelve tu problema no olvides marcarla como aceptada para mantener la calidad del sitio. Saludos! Commented el 3 ago. 2017 a las 23:03

2 respuestas 2

1

Lo que sucede es que tienes un return en el primer if que impide que el segundo if se ejecute, por lo tanto, nunca le permites a JQuery desplegar el mensaje. Lo que puedes hacer es tener una variable donde almacenar el resultado y retornarla hasta de último.

function validarFormulario(){
  var resultado = true;

  $("#txtError_campoNombre").text("");
  $("#txtError_campoPais").text("");

   if($("#campo_nombre").val() == ""){
       $("#txtError_campoNombre").text("Debe ingresar el nombre de la Idea");
       resultado = false;
    }

    if($("#campo_pais").val() == ""){
        $("#txtError_campoPais").text("Debe seleccionar Site");
        resultado = false;
    }

    return resultado;
}

P.D. Siempre puedes escribir texto (en Paint?) en vez de dibujarlo. Saludos!

0

Estimado

Veo que no has agregado la etiqueta y tampoco un submit. Asumiendo que las tienes debes realizar la siguiente actualización en la etiqueta form...onsubmit, ejemplo:

   <form action="/" method="post" onsubmit="return validarFormulario()">
        <div class="panel panel-default">
            ......
        </div>
        <input type="submit" />
    </form>

Estoy agregando un botón submit para que puedas probarlo. Saludos

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.