Validar formulario con java script

manyblue · #1 (**permalink**) 23/10/2015, 05:26

Un saludo, esto no me funciona que esta mal??
FORMULARIO:

Código HTML:

<form method="POST" class="form-horizontal" action="<?php echo $editFormAction; ?>" name="FormularioAltaUsuario" id="FormularioAltaUsuario" onSubmit="javascript:return ValidarFormulario();">
  <div class="form-group">
      <label for="strNombre" class="col-sm-3 control-label">Nombre:</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" name="strNombre" id="strNombre" placeholder="Nombre">
      </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoNombre">* Nombre es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
      <label for="strApellidos" class="col-sm-3 control-label">Apellidos:</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" name="strApellidos" id="strApellidos" placeholder="Apellidos">
      </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoApellidos">* Apellidos es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strNick_Usuario" class="col-sm-3 control-label">Nick:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="strNick_Usuario" id="strNick_Usuario" placeholder="Nick">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoNick">* Nick o Seudónimo es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strEmail" class="col-sm-3 control-label">Email:</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" name="strEmail" id="strEmail" placeholder="Email">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoEmail">* Email es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
      <div class="alert alert-danger oculto" role="alert" id="AvisoEmailDiferente">* Los Emails no coinciden, revisalos.</div>
  <div class="form-group">
    <label for="strEmail2" class="col-sm-3 control-label">Repetir Email:</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" name="strEmail2" id="strEmail2" placeholder="Repetir Email">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoEmail2">* Repetir Email es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strPassword" class="col-sm-3 control-label">Contraseña:</label>
    <div class="col-sm-3">
      <input type="password" class="form-control" name="strPassword" id="strPassword" placeholder="Contraseña">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoPassword">* Contraseñal es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
       <div class="alert alert-danger oculto" role="alert" id=" AvisoPasswordDiferente">* Las Contraseñas no coinciden, revisalas.</div>
  <div class="form-group">
    <label for="strPassword2" class="col-sm-3 control-label">Repetir Contraseña:</label>
    <div class="col-sm-3">
      <input type="password" class="form-control" name="strPassword2" id="strPassword2" placeholder="Repetir Contraseña">
    </div>
  </div>
   <div class="alert alert-danger oculto" role="alert" id="AvisoPassword2">* Repetir Contraseñal es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strImagen_Usuario" class="col-sm-3 control-label">Imagen:</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="strImagen_Usuario" id="strImagen_Usuario" placeholder="Imagen">
    </div>
    <input type="button" value="Subir Imagen" class="btn btn-default" onClick=""> 
  </div>
  <div class="form-group">
    <label for="intTelefono" class="col-sm-3 control-label">Teléfono:</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="intTelefono" id="intTelefono" placeholder="Teléfono">
    </div>
  </div>
  <div class="form-group">
    <label for="intMovil" class="col-sm-3 control-label">Movil:</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="intMovil" id="intMovil" placeholder="Movil">
    </div>
  </div>
  <div class="form-group">
    <label for="strDireccion" class="col-sm-3 control-label">Dirección:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="strDireccion" id="strDireccion" placeholder="Dirección">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoDireccion">* Dirección es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strPoblacion" class="col-sm-3 control-label">Población:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="strPoblacion" id="strPoblacion" placeholder="Población">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoPoblacion">* Población es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="intCodigo_Postal" class="col-sm-3 control-label">Código Postal:</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="intCodigo_Postal" id="intCodigo_Postal" placeholder="Código Postal">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoCodigoPostal">* Código Postal es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strProvincia" class="col-sm-3 control-label">Provincia:</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="strProvincia" id="strProvincia" placeholder="Provincia">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoProvincia">* Provincial es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <div class="form-group">
    <label for="strPais" class="col-sm-3 control-label">País:</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="strPais" id="strPais" placeholder="País">
    </div>
  </div>
  <div class="alert alert-danger oculto" role="alert" id="AvisoPais">* País es un campo Obligatorio, no puesde estar vacio, por lo que debes rellenarlo.</div>
  <input type="hidden" name="Fecha_Alta_Usuario" id="Fecha_Alta_Usuario" value="<?php echo date("Y-m-d  H:i:s");?>">
  <input type="hidden" name="intEstado" id="intEstado" value="1">
  <input type="hidden" name="intNivel" id="intNivel" value="3">
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-10">
      <button type="submit" class="btn btn-primary">Registrarse</button>
    </div>
  </div>
  <input type="hidden" name="MM_insert" value="FormularioAltaUsuario">
  </form>

EL JAVASCRIPT:

Código HTML:

<script>
function ValidarFormulario()
{
    valid = true;
    $("#AvisoNombre").hide("slow");
    $("#AvisoApellidos").hide("slow");
    $("#AvisoNick").hide("slow");
    $("#AvisoEmail").hide("slow");
    $("#AvisoEmail2").hide("slow");
    $("#AvisoPassword").hide("slow");
    $("#AvisoPassword2").hide("slow");
    $("#AvisoDireccion").hide("slow");
    $("#AvisoPoblacion").hide("slow");
    $("#AvisoCodigoPostal").hide("slow");
    $("#AvisoProvincia").hide("slow");
    $("#AvisoPais").hide("slow");
    $("#AvisoEmailDiferente").hide("slow");
    $("#AvisoPasswordDiferente").hide("slow");
    
    if (document.FormularioAltaUsuario.strNombre.value == ""){
        $("#AvisoNombre").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strApellidos.value == ""){
        $("#AvisoApellidos").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strNick_Usuario.value == ""){
        $("#AvisoNick").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strEmail.value == ""){
        $("#AvisoEmail").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strEmail2.value == ""){
        $("#AvisoEmail2").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strPassword.value == ""){
        $("#AvisoPassword").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strPassword2.value == ""){
        $("#AvisoPassword2").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strDireccion.value == ""){
        $("#AvisoDireccion").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strPoblacion.value == ""){
        $("#AvisoPoblacion").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strCodigo_Postal.value == ""){
        $("#AvisoCodigoPostal").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strProvincia.value == ""){
        $("#AvisoProvincia").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strPais.value == ""){
        $("#AvisoPais").show("slow");
        valid = false;
    }
    //FIN ERRORES DE CAMPOS VACIOS
    if (document.FormularioAltaUsuario.strEmail.value != document.FormularioAltaUsuario.strEmail2.value){
        $("#AvisoEmailDiferente").show("slow");
        valid = false;
    }
    if (document.FormularioAltaUsuario.strPassword.value != document.FormularioAltaUsuario.strPassword2.value){
        $("#AvisoPasswordDiferente").show("slow");
        valid = false;
    }
    //FIN ERRORES DE EMAIL Y PASSWOD DIFERENTE
    return valid;
}
</script>
Muchas gracias de antemano: Manyblue

manyblue · #2 (**permalink**) 24/10/2015, 01:39

Como veo que no hay respuesta, explico un poco lo que me pasa.
usuario_alta.php es un archivo en el cual está el formulario, el javascript y el INSERT de mysql para insertar un usuario en la DB.
Al darle al boton submit sin rellenar el formulario, debe saltar al javascript, aplicarlo y pararse cuando salten los avisos. Esto no pasa pues si que aparecen los avisos sobre 1 segundo, enseguida hace el INSERT y salta a ausuario_alta_ok.php. ¿Por que me salta a usuario_alta_ok.php y no se para en el javascript con los avisos sin hacer el INSERT.

Trabajo con Dreamweaber y usuario alta.php viene de una plantilla principal.dwt.php. Como sabeís dreamweaber trabaja con mysql pero yo al final de la web lo convierto todo a mysqli sin problemas.

¿Que me estará pasando?

Como no se pueden poner aquí más de 1509 caracteres os doy la url para que veís todo el documento usuario_alta.php:
http://www.grancanarialive.tv/Docume...uario_alta.zip

Muchas gracias de ante mano, un saludo: Manyblue

mortiprogramador · #3 (**permalink**) 24/10/2015, 10:11

Saludo
Como veo que faltan archivos, puse en comentario todos los includes y require...
Ahora, se hace esto

Código Javascript:

Ver original<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>

Esos archivos están siendo llamados correctamente?
El formulario tiene acceso a esas rutas?

Pues a pesar que incluso la función sea forzada a retornar false,
estas líneas

Código Javascript:

Ver original$("#AvisoNombre").hide("slow");
    $("#AvisoApellidos").hide("slow");
    $("#AvisoNick").hide("slow");
    $("#AvisoEmail").hide("slow");
    $("#AvisoEmail2").hide("slow");
    $("#AvisoPassword").hide("slow");
    $("#AvisoPassword2").hide("slow");
    $("#AvisoDireccion").hide("slow");
    $("#AvisoPoblacion").hide("slow");
    $("#AvisoCodigoPostal").hide("slow");
    $("#AvisoProvincia").hide("slow");
    $("#AvisoPais").hide("slow");
    $("#AvisoEmailDiferente").hide("slow");
    $("#AvisoPasswordDiferente").hide("slow");

Sin la ubicación de jquery en este caso, hace que pase de largo
y haga el submit.

Una lástima que el archivo comprimido no contuviese todo lo necesario para probar,
pero arreglando eso funciona.