Botón de desactivación de jQuery (NO Enviar) hasta que el campo valide + Complemento de validación

Tengo 4 botones en mi formulario, un botón Enviar, Cancelar, Agregar y Eliminar. Todos funcionan como se esperaba, pero me gustaría desactivar el botón Agregar hasta que el campo de entrada valide. Estoy usando el complemento de Validación y creo que esto se puede hacer con una validación requerida con una devolución de llamada, pero no estoy seguro.Botón de desactivación de jQuery (NO Enviar) hasta que el campo valide + Complemento de validación

¿Podría alguien señalarme en la dirección correcta?

ACTUALIZACIÓN:

Aquí es una idea de algún código

required: function(element) { 
    return($('#chargeamtaddButton').attr('disabled', ? '','disabled'); 
}

aguardando la bandera verdadera opción/falsa para establecer el atributo discapacitados

Fuente

2009-05-19 Phill Pafford

Phill, ¿trabajó esta en el final? ¿Eres capaz de proporcionar tu solución final? – Blair

@blairyeah - vea la respuesta de Michael Irgoyen – ripper234

-2

He usado el complemento de validación antes, pero no recuerdo todos los detalles. Estoy bastante seguro de que es algo como esto:

$(function() { 
    $('#myForm').validate(
     rules: { 
      'elementToWatch': { 
       success: function(element) { 
        if($("#myform").validate().element("#myselect")) { 
         $('#chargeamtaddButton:disabled').removeAttr('disabled'); 
        } else { 
         $('#chargeamtaddButton').attr('disabled','disabled'); 
        } 
       }, 
       // etc... 
      }, 
      // etc... 
     }, 
     // etc... 
    }); 
});

Ya que hay muchas maneras de utilizar el plugin de validación, es difícil darle consejos perfecto, pero espero que lo que he mostrado le da una mejor idea de cómo avanzar Quizás si le dieras más código y HTML, podría ayudarte más.

Fuente

2009-05-19 17:35:16 KyleFarris

hombre esto es tan cerca que simplemente no puedo conseguirlo, ¿el éxito debe estar fuera de las reglas? –

¿Qué tal algún tipo de evento focal? –

Esto no funciona. El método 'success' no puede estar bajo el método' rules'. Además, el método de "éxito" solo comienza a activarse después de que el formulario se haya enviado por primera vez. También se activa cada vez que se cambia algo en el formulario, lo que significa que se devolverá verdadero si el campo específico en el que se encuentra valida, incluso si otros campos en su formulario no lo hacen. Esto es para cambiar la etiqueta de los campos actuales o agregar un mensaje sobre el campo actual. Una simple lectura en el manual habría explicado este comportamiento. http://docs.jquery.com/Plugins/Validation/validate –

jQuery Validate Plugin Documentation: Form Method

El método anterior de el complemento validar le permite verificar si un formulario es válido. Entonces, si no puede hacer que la devolución de llamada funcione, entonces ejecutaría un temporizador y verificará si el formulario es válido de vez en cuando, y si es así habilite su botón. Esto apesta sin embargo.

No puedo encontrar una devolución de llamada correcta para el complemento de validación, por lo que creo que está bloqueado con el método submitHandler. Sin embargo, todavía no está listo para enviar el formulario, ya que aún desea agregar campos. Así que mi solución propuesta es dejar el botón de agregar habilitado todo el tiempo, pero hacer que llame a una función cuando se hace clic para ver si el formulario es válido. Si es así, agregue su campo o lo que sea, y si no, muestre los errores. Entonces:

<body onload="formValidator = $('#form').validate();"> 
... 
<input value='add' name='add' onclick='addIsValid();'> 
... 
<script type='text/javascript' language='javascript'> 
function addIsValid() { 
    if(formValidator.numberOfInvalids() > 0) { 
      formValidator.showErrors(); 
     } else { 
      addElementToFormOrWhatever(); 
     } 
    } 
</script>

O al menos algo en ese sentido. ¡Buena suerte!

Fuente

2009-05-19 12:56:44 hornairs

¿Esto va dentro de document.ready o fuera? –

Aquí hay una devolución de llamada para el complemento Validation http://docs.jquery.com/Plugins/Validation/Methods/required –

Hmm Veo lo que estás tratando de hacer pero no está funcionando con lo que tengo. Creo que necesito incorporar el complemento de validación –

De hecho, he descubierto la mejor manera de hacerlo, y está utilizando un método no documentado checkForm() dentro del complemento.

Agregue este código a la función $(document).ready() en la página donde está su formulario.

$('#yourform').bind('change keyup', function() { 
    if($(this).validate().checkForm()) { 
     $('#submitbutton').removeClass('button_disabled').attr('disabled', false); 
    } else { 
     $('#submitbutton').addClass('button_disabled').attr('disabled', true); 
    } 
});

En este caso, se añadirá la clase button_disabled al botón y luego añadir el atributo disabled. Puede aplicar un estilo desactivado al botón a través de CSS.

Fuente

2011-05-20 13:57:15

hmm tendrá que jugar con esto, gracias –

@PhillPafford - ¿No es esta la solución correcta? Funcionó perfectamente para mí. – ripper234

@ ripper234 me alegro de que haya encontrado algo que funcionó para usted –

Una solución más elegante y rápida es simplemente reemplazar el valor predeterminado de clic y en keyup eventos añadiendo el código que necesita de la siguiente manera en lugar de añadir otra escucha evento

$("#form").validate({ 
    submitHandler: function(form) { 
     form.submit(); 
    }, 
    onkeyup: function(element, event) { 
     if (event.which === 9 && this.elementValue(element) === "") { 
      return; 
     } else if (element.name in this.submitted || element === this.lastElement) { 
      this.element(element); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    }, 
    onclick: function(element) { 
     // click on selects, radiobuttons and checkboxes 
     if (element.name in this.submitted) { 
      this.element(element); 

     // or option elements, check parent select in that case 
     } else if (element.parentNode.name in this.submitted) { 
      this.element(element.parentNode); 
     } 

     if (this.checkForm()) { // checks form for validity 
      $('a.submit').attr('class', 'submit btn btn-success');  // enables button 
     } else { 
      $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button 
     } 
    } 
})

Con el siguiente código CSS para el gatillo presentar - inhabilitado inicialmente (en arranque 3 clases):

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

Esta muy fácil se puede utilizar con plug-in de jQuery areYouSure sólo permiten al presentar cuando se realizan cambios reales:

if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity

inicializar el plug-in utilizar silencioso:

$('#form').areYouSure({'silent':true});

Fuente

2014-06-05 00:15:24 user3709159

Botón de desactivación de jQuery (NO Enviar) hasta que el campo valide + Complemento de validación

Respuesta

Cuestiones relacionadas