3

Tengo un incoveniente estoy haciendo una app web y me piden que si el usuario es mayor de 18 años pueda registrarse y si no salga algun mensaje. La verdad de javascript se muy poco. Si me pudieran ayudar lo agradeceria mucho, dejo el codigo del formulario y el js de como lo estoy validando gracias:

FORM:

<h:form id="formularioRegistro" class="form-horizontal">
    <legend>Registro de usuarios</legend>

    <!-- nombre-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="nombre" >Nombres:</label>  
        <div class="col-md-6">
            <input id="nombre" name="nombre" type="text" placeholder="" maxlength="30" class="form-control input-md"   tabindex="1" ></input>
        </div>
    </div>

    <!-- Apellido-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="apellido">Apellidos:</label>  
        <div class="col-md-6">
            <input id="apellido" name="apellido" type="text" maxlength="30" placeholder="" class="form-control input-md"  tabindex="2"></input>
        </div>
    </div>

    <!-- Documento-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="documento">N° Documento:</label>  
        <div class="col-md-6">
            <input id="documento" name="documento" type="text" maxlength="10" placeholder="" class="form-control input-md"  tabindex="3"></input>
        </div>
    </div>
    <!-- Email-->

    <div class="form-group">
        <label class="col-md-4 control-label" for="correo">Email:</label>  
        <div class="col-md-6">
            <input id="correo"  name="correo" type="email" class="form-control"  placeholder="[email protected]"  tabindex="4"   ></input>
        </div>
    </div>
    <!-- Contraseña-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="contrasena">Contraseña:</label>  
        <div class="col-md-6">
            <input id="contrasena"  name="contrasena" type="password" class="form-control" placeholder="********"  tabindex="5" ></input> 
        </div>
    </div>
    <!-- Confirmar contraseña-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="repetirContraseña">Confirmar contraseña:</label>  
        <div class="col-md-6">
            <input id="repetirContraseña" name="repetirContraseña" type="password" class="form-control" placeholder="********"  tabindex="6"></input>
        </div>
    </div>
    <!-- Direccion-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="direccion">Dirección:</label>  
        <div class="col-md-6">
            <input id="direccion" name="direccion" type="text" placeholder="" class="form-control input-md" maxlength="50" tabindex="7"></input>

        </div>
    </div>

    <!-- Telefono-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="tel">Teléfono:</label>  
        <div class="col-md-6">
            <input id="tel" name="tel" type="text" maxlength="15" placeholder="" class="form-control input-md"  tabindex="8"></input>
        </div>
    </div>

    <!-- Ciudad -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="ciudad">Ciudad:</label>
        <div class="col-md-6">
            <select id="ciudad" name="ciudad" class="form-control"  tabindex="10" >
                <option selected="true" disabled="true">Seleccione Ciudad...</option>
                <c:forEach var="objCiudad" items="#{controladorCiudad.listarCiudades()}">
                    <option value="#{objCiudad.idCiudad}">#{objCiudad.nombreCiudad}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <!-- Fecha -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="fechaN">Fecha de Nacimiento:</label>  
        <div class="col-md-6">
            <input id="fechaN" name="fechaN" type="date" placeholder="" class="form-control input-md"  tabindex="11"></input>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-4 control-label" for="genero">Genero:</label>
        <div class="col-md-6">
            <select id="genero" name="genero" class="form-control"  tabindex="10" >
                <option selected="true" disabled="true">Seleccione Genero...</option>
                <option value="Masculino">Masculino</option>
                <option value="Femenino">Femenino</option>

            </select>
        </div>
    </div>



    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-10">
            <div class="checkbox">
                <label class="col-md-5 control-label"></label>
                <div class="col-md-8">
                    <label><input type="checkbox" id="confirmar" name="confirmar" ></input>Acepto términos y condiciones</label>
                </div>
            </div>
        </div>
    </div>

    <div id="condicion" class="col-md-12">
        <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
        <u>Para registarse en Effective Orderrs debe diligenciar todos los campos</u>
    </div> 

    <!-- Boton -->
    <div id="boton">
        <div class="form-group">
            <label class="col-md-4 control-label" for="Boton"></label>
            <div class="col-md-4">
                <h:commandButton id="Boton" type="submit" class="btn btn-success" value="Registrarme" action="#{controladorUsuario.registrarUsuario()}" tabindex="12"></h:commandButton>
            </div>
        </div>
    </div>
</h:form>  

VALIDACION FORMULARIO

$().ready(function () {

    $('#formularioRegistro').formValidation({// Validación datos capa cliente. TENER PRESENTE EL ID DEL FORM
        err: {container: 'tooltip'}, //muestra en tooltips
        icon: {valid: 'fa fa-thumbs-up', invalid: 'fa fa-thumbs-down', validating: 'fa fa-refresh'}, //iconos
        //locale: 'es_ES', //idioma - debe enlazar el archivo "es_ES.js"
        fields: {
            nombre: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un nombre válido '

                    },
                  regexp: {
                       regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'Solo letras, sin números o caracteres especiales'
                    },
                    stringLength: {
                        min: 3,
                        message: 'Minimo 3'
                    }
                }
            },
            apellido: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un apellido válido'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'Solo letras, sin números o caracteres especiales'
                    },
                    stringLength: {
                        min: 3,
                        message: 'Minimo 3'
                    }
                }
            },
            documento: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un documento válido'
                    },
                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'Solo números'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 caracteres'
                    }
                }
            },
            correo: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un correo válido'
                    },
                    regexp: {
                        regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/,
                        message: 'No se aceptan carecteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 caracteres'
                    }
                }
            },
            contrasena: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese una contraseña válida'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
                        message: 'No se aceptan carecteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 caracteres'
                    }
                }
            },
            repetirContraseña: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese una contraseña válida'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
                        message: 'No se aceptan carecteres especiales'
                    },
                    stringLength: {
                        min: 5,
                        message: 'Minimo 5 caracteres'
                    },
                    identical: {
                        field: 'contraseña',
                        message: 'Las contraseñas no coinciden'
                    }
                }
            },
            direccion: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese una dirección válida'
                    },
                    regexp: {
                        regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
                        message: 'No se aceptan caracteres especiales'
                    },
                    stringLength: {
                        min: 10,
                        message: 'Minimo 10 caracteres'
                    }
                }
            },
            tel: {//Validar con los aributos NAME de cada INPUT
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Ingrese un telefono válido'
                    },
                    regexp: {
                        regexp: /^[0-9-]+$/,
                        message: 'Sólo numeros'
                    },
                    stringLength: {
                        min: 7,
                        message: 'Minimo 7 caracteres'
                    }
                }

            },
            ciudad: {
                validators: {
                    callback: {
                        message: 'Debe elegir su ciudad',
                        callback: function (value, validator, $field) {
                            // Get the selected options
                            var options = validator.getFieldElements('ciudad').val();
                            return (options !== null && options.length >= 1 && options.length <= 4);
                        }
                    }
                }
            },
               genero: {
                validators: {
                    callback: {
                        message: 'Debe elegir su genero',
                        callback: function (value, validator, $field) {
                            // Get the selected options
                            var options = validator.getFieldElements('genero').val();
                            return (options !== null && options.length >= 1 && options.length <= 10);
                        }
                    }
                }
            },
            'confirmar[]': {
                row: '.form-group',
                validators: {
                    notEmpty: {
                        message: 'Debe aceptar terminos y condiciones'
                    },
                    stringLength: {
                        max: 1,
                        message: 'Debe aceptar terminos y condiciones'
                    }
                }
            }


        }
    });
});
6
  • Para empezar te falta el campo edad: es mucho más fácil que el usuario escriba su edad en el formulario, a calcularlo en base a su documento de identidad.
    – SalahAdDin
    Commented el 6 abr. 2016 a las 1:23
  • 1
    @SalahAdDin tiene la fecha de nacimiento, con eso podrias conocer la edad Commented el 6 abr. 2016 a las 1:32
  • 1
    Hola Lina. Veo que utilizas JSF para tu <h:form> pero no para los componentes internos como <input> en lugar de <h:inputText>. ¿Cuál es la causa de esto? ¿Quizás por aplicar las validaciones de jquery cambiaste los componentes?
    – user227
    Commented el 6 abr. 2016 a las 3:26
  • 1
    Si exactemente, para poder validar en formValidation necesito los name y en el h:inputText este atributo no lo tiene! Commented el 6 abr. 2016 a las 4:00
  • 1
    En JSF el nombre de un componente se basa en el id del componente. Si declaras <h:form id="formulario"> <h:inputText id="nombre" /> </h:form> verás un HTML generado similar a <form id="formulario"> <input type="text" id="formulario:nombre" name="formulario:nombre" /> </form>. Allí puedes ubicar el nombre de tu componente HTML y utilizarlo en tu validación jquery.
    – user227
    Commented el 6 abr. 2016 a las 5:30

1 respuesta 1

2

En tu caso deberias escribir un nuevo validador

Writing new validator

$(document).ready(function() {
  
    FormValidation.Validator.mayorEdad = {
        validate: function(validator, $field, options) {
            var value = $field.val();
            
           
            var fechanacimiento = moment(value, "DD-MM-YYYY");
          
            if(!fechanacimiento.isValid())
                return false;
          
            var years = moment().diff(fechanacimiento, 'years');
          
            return years > 18;
               
        }
    };

    $('#formularioRegistro').formValidation({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fechaN: {
                validators: {
                    notEmpty: {
                        message: 'La fecha de nacimiento es requerida'
                    },
                    mayorEdad: {
                        message: 'No es mayor de edad'
                    }
                }
            }
        }
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>


<form id="formularioRegistro" class="form-horizontal">
    <legend>Registro de usuarios</legend>

    <div class="form-group">
        <label class="col-md-4 control-label" for="fechaN">Fecha de Nacimiento:</label>  
        <div class="col-md-6">
            <input id="fechaN" name="fechaN" type="text" placeholder="" class="form-control input-md"  tabindex="11"></input>
        </div>
    </div>

   <div id="boton">
        <div class="form-group">
            <label class="col-md-4 control-label" for="Boton"></label>
            <div class="col-md-4">
                <button id="Boton" type="submit" class="btn btn-success" value="Registrarme" action="#{controladorUsuario.registrarUsuario()}" tabindex="12"></button>
            </div>
        </div>
    </div>

</form>  

Con la ayuda de moment.js puedes calcular el cumpleaños para ver si es mayor a 18 y hacer que la validacion custom pase correctamente.

3
  • Escrito por @Lina: "Hola,Leandro me sirve mucho tu código, pero al probarlo solo me acepta como valido antes de esta fecha 30/03/1997 por ejemplo yo nací el 27/01/1998 es decir que ya tengo 18 años y me aparece como no valido, que aun soy menor de edad. Que cambios le hago a tu código para que haga esto? Muchas gracias por ayudarme!" Commented el 6 abr. 2016 a las 4:15
  • 1
    El problema seguramente se presente cuando moment parsea la fecha, no se que browser usas, si es IE podrias poner un breakpoint en el codigo y evaluar si pasa por el isValid() o si usas Chrome usar la developer tools ,a la cual accedes con F12, y poder poner un breakpoint alli para evaluar que valor esta tomando. Commented el 6 abr. 2016 a las 13:34
  • @Leandro Tuttini: Creo que realmente el ajuste que le hace falta a tu función es cambiar return years > 18 por return years >= 18. Un saludo! :)
    – Atap23
    Commented el 12 jun. 2019 a las 19:55

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.