Detalles del Proyecto

URL del proyecto:

HTML5 Valid GitHub

Copyright:

MIT

Suscribase

CódigoPortfolio: HTML5 Valid

Validador y manejador de formularios usando las API de javascript, jQuery y HTML5.

Validaciones

  • Validación
  • Obtención de valores
  • Validación en linea

Soportes

Es soportado por todos los navegadores moderno, ya que para la fecha el 90% de los navegadores soportan las api form.

Dependencias

jQuery >= 3

 

Documentación

Instalación

Solo debe ingresar la siguiente linea a su proyecto y listo, fácil rápido y compatible con otros frameword <script src="html5valid.js"></script> Apartir de esto HTML5 VALID toma control y queda a la espera para su ejecución.

Uso

Es sencillo de usar solo debemos agregar el atributo data-role="html5valid al elemento Form y listo.

Ejemplo

Uso básico.

<form data-role="html5valid" data-online="true" data-on-success="success" data-on-error="error">
    <div class="form-row">
        <div class="col-md-6 mb-3">
             <input type="text" class="form-control" placeholder="Primer Nombre" data-required data-msj="Indique su primer nombre">
        </div>
        <div class="col-md-6 mb-3">
             <input type="text" class="form-control" placeholder="Segundo Nombre">
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-6 mb-3">
             <input type="text" class="form-control" placeholder="Primer Apellido" data-required data-msj="Indique su primer apellido">
        </div>
        <div class="col-md-6 mb-3">
             <input type="text" class="form-control" placeholder="Segundo Apellido">
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-6 mb-3">
             <input type="number"  min="18" max="45" step="1" data-type-valid="min,max" class="form-control" placeholder="Edad" data-required data-msj="Debe agregar una edad comprendida entre 18 y 45">
        </div>
        <div class="col-md-6 mb-3">
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" data-required>
                    <label class="form-check-label">
                        Acepta los terminos y condiciones?
                    </label>
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Enviar</button>
</form>

Para ver mas ejemplos y una documentación mas detallada descargela y aceda a la carpeta docs desde cualquier navegador web.

Si desea un plugin o componente para su web Contactenos YA le atenderemos.

Leave A Comment