Tengo el siguiente código de ejemplo que funciona en los navegadores que comprobar cuando ven el HTML5 «necesaria» en una entrada, como el correo electrónico aquí:

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>

Aquí es un el violín por los de arriba.

Sin embargo, en mi aplicación que uso un botón fuera de mi forma y el siguiente código asociado al evento click del botón:

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

Tengo dos preguntas aquí:

  • ¿Qué hace el siguiente código: (!$el formulario.válido || $formulario.válido())
  • ¿Cómo puedo controlar mi forma de validez utilizando el nuevo HTML5 cheques?
  • ¿De dónde sacaste el ejemplo de? $formulario es un objeto, y no está definida en ningún lugar, así que hay una pieza del rompecabezas que falta.
  • Declarar que $formulario = $(‘#myForm)
  • Gracias por agregar el $form = $(‘#myForm). Me hizo perder eso.
InformationsquelleAutor | 2012-09-18

2 Comentarios

  1. 53

    Suponiendo que haya establecido el elemento de formulario a un objeto llamado $form, entonces if (!$form.valid || $form.valid()) es inteligente sintaxis que significa que «si $form no tiene un método llamado valid, o si valid() devuelve true». Normalmente se han instalado e inicializado el jQuery Validation plugin, pero esto impide que la forma de ser desactivado si la validación plugin no está cargado.

    Usted puede hacer una prueba similar utilizando HTML5 método checkValidity, buscando algo como esto:

    if (!$form.checkValidity || $form.checkValidity()) {
      /* submit the form */
    }

    EDITAR: checkValidity es una función de los formularios de HTML5 spec. A partir de febrero de 2016 CanIUse.com los informes que más del 95% de los navegadores la soportan.

    • Es checkValidity una función jQuery? La razón por la que estoy pidiendo esto es debido a que miré hacia arriba y vi $(‘#profileform’)[0].checkValidity() Basado en los post que he leído me pregunto si debería haber [0] incluido.
    • He editado el post con un par de enlaces adicionales. Básicamente, checkValidity es un HTML5 función y no la parte de jQuery. Con respecto a la [0], jQuery $ función devuelve listas de objetos cuando se le pase una cadena, por lo que en el fin de volver a un solo objeto (como su forma), es necesario especificar un índice. Buscar .get(index) en la documentación de jQuery para obtener más información.
    • Gracias por los enlaces. Mi código es el siguiente: var $formulario = $modal.find(‘#main-form’); Cuando traté de la línea de código que había que acaba de pasar por encima de la línea sin tener que hacer nada a pesar de que yo especifique un ID en mi selector. Lo tengo que cambiar esto para var $formulario = $modal.find(‘#main-form’)[0]; ?
    • Básicamente, sí. Ambos $('query') y object.find('query') devolver un objeto confusamente llamado «jQuery», y es necesario utilizar .get(0) o get(0) con el fin de volver a un solo elemento que, como checkValidity método. Es como la diferencia entre la apertura de una biblioteca y la apertura de un libro–haciendo con una colección simplemente no tiene sentido.
    • He actualizado mi violín, pero todavía no puede conseguir que funcione: jsfiddle.net/E6jhE/1 se Puede ver nada de lo que está mal. Lo siento hacer tantas preguntas y gracias por su ayuda con esto.
    • Fijo aquí. Para uno, checkValidity() puede o no puede mostrar al usuario los campos no válidos, pero devolverá true si y sólo si todos los campos son válidos. Por otro, <div id="#foo"> siempre es incorrecta; nunca ponga una etiqueta de hash dentro de un atributo ID. En jQuery y CSS, el uso de la marca a decir «la palabra que viene es un número, no una clase o nombre de la etiqueta». Por último, me fija el marco en la barra de la izquierda–asegúrese de que usted está trabajando con jQuery y no Moo. Espero que esto ayude!
    • En el HTMLFormElement api existe también el método de reportValidity() que devuelve false si el elemento de formulario no es válido y de fuego invalid eventos para cada uno de los elementos válidos. Pero por desgracia esto no es compatible con cualquier versión de IE: el 90% de compatibilidad del navegador.

  2. 1

    En HTML5, se puede usar una «forma» atributo de un elemento explícitamente asociado con un elemento de Formulario, independientemente de dónde está posicionado en la estructura de la página:
    http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

    En navegadores compatibles con, usted debería ser capaz de poner su input[type=submit][forma=id] elemento en cualquier parte y aún así va a activar correctamente la validación y proceso de envío.

    Que tienden a poner el código que se supone que es para interceptar el proceso de envío del formulario «enviar» controlador de eventos, de esa manera se activa por parte de los usuarios de apretar la tecla Enter, así como cualquier input[type=submit] los botones que tengo.

Dejar respuesta

Please enter your comment!
Please enter your name here