Skip to main content
se eliminaron 6412 caracteres en el cuerpo
Origen Enlace
Leandro Tuttini
  • 36k
  • 3
  • 15
  • 41

tengoTengo 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"> Registro de usuarios

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

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

                                <!-- DocumentoApellido-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="documento">N° Documentofor="apellido">Apellidos:</label>  
                                    <div class="col-md-6">
                                        <input id="documento"id="apellido" name="documento"name="apellido" type="text" maxlength="10"maxlength="30" placeholder="" class="form-control input-md"  tabindex="3"><tabindex="2"></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ñaDocumento-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="contrasena">Contraseñafor="documento">N° Documento:</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-->
                            id="documento" name="documento" type="text" maxlength="10" <divplaceholder="" 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="forminput-control" placeholder="********"md"  tabindex="6"><tabindex="3"></input>
                                    </div>
                                </div>
                                <!-- DireccionEmail-->
                                <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 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>

                                <!-- 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 Telefono-->
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="fechaN">Fecha de Nacimientofor="tel">Teléfono:</label>  
                                    <div class="col-md-6">
                                        <input id="fechaN"id="tel" name="fechaN"name="tel" type="date"type="text" maxlength="15" placeholder="" class="form-control input-md"  tabindex="11"><tabindex="8"></input>
                                    </div>
                                </div>

                          <!-- Ciudad -->
    <div class="form-group">
                                    <label class="col-md-4 control-label" for="genero">Generofor="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>
  <select id="genero" name="genero" class="form-control"  tabindex="10" >
        <c:forEach var="objCiudad" items="#{controladorCiudad.listarCiudades()}">
                    <option value="#{objCiudad.idCiudad}">#{objCiudad.nombreCiudad}</option>
             <option selected="true" disabled="true">Seleccione Genero...</option>c:forEach>
            </select>
        </div>
    </div>
    <!-- Fecha -->
    <div class="form-group">
        <label class="col-md-4 <optioncontrol-label" value="Masculino">Masculino</option>
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>
   <option value="Femenino">Femenino<</option>div>

                   <div class="form-group">
        <label class="col-md-4 control-label" for="genero">Genero:</label>
        <div </select>class="col-md-6">
            <select id="genero" name="genero" class="form-control"  tabindex="10" >
                <option selected="true" disabled="true">Seleccione Genero...</div>option>
                <option value="Masculino">Masculino</option>
                <option <value="Femenino">Femenino</div>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 class="form-group">
        <div class="col-sm-offset-1 col-sm-10">
            <div id="condicion" class="col-md-12">class="checkbox">
                   <label class="col-md-5 control-label"></label>
               <span class="glyphicon<div glyphicon-infoclass="col-sign" ariamd-hidden="true"></span>8">
                    <label><input type="checkbox" id="confirmar" name="confirmar" ></input>Acepto términos y condiciones</label>
         <u>Para registarse en Effective Orderrs debe diligenciar todos los campos<</u>div>
                    </div>
        </div>
    </div> 

                    <div id="condicion" class="col-md-12">
        <span class="glyphicon <!glyphicon-info- Botonsign" -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 () {

VALIDACION FORMULARIO

>$$('#formularioRegistro').formValidationready({// 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: {
               function notEmpty:() {
                    message: 'Ingrese un nombre válido '

    $('#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'
                    }
                }
            }
        }


        }
    });
});

});

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"> Registro de usuarios

                                <!-- 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'
                }
            }
        }


    }
});

});

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'
                    }
                }
            }


        }
    });
});
título editado
Enlace
Lina Cortés
  • 741
  • 4
  • 18
  • 28

Validar susi el usuario es mayor de edad

Origen Enlace
Lina Cortés
  • 741
  • 4
  • 18
  • 28

Validar su el usuario es mayor de edad

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"> Registro de usuarios

                                <!-- 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'
                }
            }
        }


    }
});

});