Validate if the user is of legal age

Question

Validate if the user is of legal age

Navigation

#1 by (2 votes)

2

I have an inconvenient I am doing a web app and they ask me if the user is over 18 years old can register and if no message comes out. The truth of javascript is very little. If you could help me I would really appreciate it, I leave the code of the form and the js of how I am validating it thanks:

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>

FORM VALIDATION

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


        }
    });
});

java javascript

asked by Lina Cortés 06.04.2016 в 03:06

source

1 answer

Problems using a builder Restart .exe .bat processes in python or django

score 2 · Accepted Answer

In your case you should write a new validator

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>

With the help of moment.js you can calculate the birthday to see if it is greater than 18 and have the custom validation pass correctly.