ansaurus

Question

jQuery disable button (NOT Submit) until field validates + Validation Plugin

Answer 1

A:

jQuery Validate Plugin Documentation: Form Method

The above method of the validate plugin allows you to check if a form is valid. So if you can't get the callback to work then I would run a timer and check to see if the form is valid every so often, and if so enable your button. This sucks though.

I can't find a success callback for the validation plug in, so I think you are stuck using the submitHandler method. However, you aren't actually ready to submit the form yet, as you still want to add fields. So my proposed solution is leaving the add button enabled all the time, but having it call a function when clicked to see if the form is valid. If so, then add your field or whatnot, and if not then pop up the errors. So:

<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>

Or at least something to that effect. Good luck!

hornairs 2009-05-19 12:56:44

does this go inside document.ready or outside?

Phill Pafford 2009-05-19 13:04:02

Here is a callback for the Validation plug-inhttp://docs.jquery.com/Plugins/Validation/Methods/required

Phill Pafford 2009-05-19 13:07:04

Hmm I see what you're trying to do but it's not working with what I have. I think I need to incorporate the validation plug-in

Phill Pafford 2009-05-19 13:12:30

added some code above

Phill Pafford 2009-05-19 13:20:18

what about some sort of focus event?

Phill Pafford 2009-05-19 18:50:00

Answer 2

A:

I've used the validation plugin before but I can't remember all the details. I'm pretty sure it's something like this:

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

Since there are so many ways to use the validation plugin, it's hard to give you perfect advice but I hope what I've shown gives you a better idea of how to move forward. Maybe if you gave some more code and HTML, I could help you out more.

KyleFarris 2009-05-19 17:35:16

man this is so close I just can't get it, does the success need to be outside of the rules?

Phill Pafford 2009-05-19 18:21:26

what about some sort of focus event?

Phill Pafford 2009-05-19 18:50:06

ansaurus

tags:

views:

answers:

jQuery disable button (NOT Submit) until field validates + Validation Plugin

related questions