CODEWITHSUNDEEP
jquery
Phill Pafford
Phill Pafford

Reputation: 85318

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

I have 4 buttons on my form, a Submit, Cancel, Add and Remove button. All are working as expected but I would like to disable the Add button until the input field validates. I'm using the Validation plug-in and I think this can be done with a required validation with a callback but I'm not sure.

Could someone point me in the right direction?

UPDATE:

Here is an idea of some code 

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

Looking for that true/false option flag to set the disabled attribute

Upvotes: 7

Views: 28795

Answers (4)

user3709159
user3709159

Reputation: 11

A more elegant and fast solution is to simply override the default on-click and on-keyup events adding the code you need as follows instead of adding another listen event

$("#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
        }
    }
})

With the following css code for the submit trigger - initially disabled (bootstrap 3 classes):

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

This can very easy be used with jquery plug-in areYouSure to only enable the submit when actual changes are made:

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

initializing the plug-in using silent: 

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

Upvotes: 0

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

I've actually discovered the best way to do this, and it's using an undocumented method checkForm() within the plugin.

Add this code to the $(document).ready() function on the page your form is on.

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

In this case, it will add the class button_disabled to the button and then add the disabled attribute. You can apply a disabled style to the button via CSS.

Upvotes: 35

KyleFarris
KyleFarris

Reputation: 17548

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.

Upvotes: -2

hornairs
hornairs

Reputation: 1725

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!

Upvotes: 1

Related Questions