cómo verificar si un formulario es válido mediante programación usando el complemento de validación jQuery


93

Tengo un formulario con un par de botones y estoy usando jQuery Validation Plugin de http://jquery.bassistance.de/validate/ . Solo quiero saber si hay alguna forma de verificar si el formulario se considera en estado válido por el complemento de validación de jquery desde cualquier lugar de mi código javascript.


2
Para aquellos que deseen utilizar HTML5 y Vanilla JS (sin jQuery): stackoverflow.com/questions/12470622/…
2540625

Respuestas:


142

Utilice .valid()desde el complemento jQuery Validation:

$("#form_id").valid();

Comprueba si el formulario seleccionado es válido o si todos los elementos seleccionados son válidos. validate () debe ser llamado en el formulario antes de verificarlo usando este método.

Donde el formulario con id='form_id'es un formulario que ya lo ha .validate()llamado.


Gracias, ya estaba haciendo algo como: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Gracias
Jaime Hablutzel

@jaime: No hay problema, me complace ayudar:)
Andrew Whitaker

En realidad, no es necesario que .validate () se ejecute primero en el formulario. Simplemente puede hacer if (form.valid ()) {} y eso funcionará, donde 'formulario' es el elemento de formulario al que se dirige.
Gareth Daine

11
TypeError: $ ("# myForm"). Valid () no es una función.
artgrohe

2
Si recibe un TypeError valid() not a functioncomplemento, agregue el complemento a su archivo, ya que es un complemento no incluido en la biblioteca jquery, por ejemplo. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd

33

Respuesta de 2015: tenemos esto listo para usar en los navegadores modernos, solo use la API HTML5 CheckValidity de jQuery. También hice un módulo jquery-html5-validity para hacer esto:

npm install jquery-html5-validity

Luego:

var $ = require('jquery')
require("jquery-html5-validity")($);

entonces puedes ejecutar:

$('.some-class').isValid()

true

1
¿Podemos llamarlo en forma completa no en cada elemento?
Parisssss

1
¡Excelente! justo lo que estaba buscando
Fester

Prefiero esto en lugar de la validfunción, ya que no llama a la validatefunción y valida su formulario.
KevinAdu

@parisssss Hizo un módulo para hacerlo en múltiples selecciones según lo solicitado.
mikemaccana



4

iContribute: Nunca es demasiado tarde para una respuesta correcta.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

De esta manera, la validación básica de HTML5 para los campos 'obligatorios' se lleva a cabo sin interferir con el envío estándar utilizando los valores de 'nombre' del formulario.


Tenga en cuenta que los selectores :inputy :visibleson extensiones de jQuery y no forman parte de CSS. Ver detalles en documentos
Geradlus_RU

3
Un formulario también puede no ser válido debido a la coincidencia de patrones y no solo porque faltan campos obligatorios
frank

4

Para un grupo de entradas, puede usar una versión mejorada basada en la respuesta de @ mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

ahora puede usar esto para verificar si el formulario es válido:

if(!$(".form-control").isValid){
    return;
}

Puede utilizar la misma técnica para obtener todos los mensajes de error:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}

He creado un complemento jQuery para hacer el .each () por ti.
Mikemaccana

1

Para Magento, verifica la validación del formulario con algo como a continuación.

Puedes probar esto:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

¡Espero que esto te ayude!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.