Disable submit button until form is valid

Question

I have a form that is validated with the bassistance validate plugin. It all works very well (great plugin by the way) but I would like to disable the submit button until the form is valid.

According to the author Jörn Zaefferer (read comment here) I have to track the validity of all fields and then enable the button.

So I presume that I first have to find my all fields with a class name of 'required' and then check if they also have a class of 'valid', and then finally enable the button... but I am really struggling to do this (I have already spent 3.5 hours, it is driving me crazy!)

I tried to bind my input fields to listen for the 'valid' class using the timer technique that was proposed here, and came up with the following:

function doneTyping () {

var requiredFields = $('input').hasClass('required');

$(requiredFields).each(function(){
    if ($(this).hasClass('valid')){
        console.log('form is valid, enable button here');
    } else {
        console.log('form is not valid yet');
    }
});

}

However my code doesn't work... Can someone please tell me if I am heading in the right direction?

When does the `doneTyping` function fire? – Adam Merrifield Jul 12 '12 at 14:48 — Adam Merrifield, Jul 12 '12 at 14:48

score 2 · Answer 1 · answered Jul 12 '12 at 14:51

2

function doneTyping () {

var requiredFields = $('input.required');

    if ($("input.required:not(:valid)").length){
        console.log('form is not valid, disable button here');
    } else {
        console.log('form is  valid ');
    }

}

answered Jul 12 '12 at 14:51

Thanks very much for your reply. I almost got it working now :) There seem to be some kind of a delay on my textarea. I uploaded my code on jsfiddle if anyone would be so kind and take a look. (never mind my fugly css) http://jsfiddle.net/WYB6N/3/ Much appreciated! – Emma Jul 12 '12 at 16:04
Ok so I figured out why the delay is - the validate class is not added until the blur event fires. Now I just need to figure out a way around this! – Emma Jul 12 '12 at 17:01

osaka · Answer 2 · 2012-07-19T17:17:49.800

0

You can check if form is valid using the below idea according to ur plugin

alert (($("#Form1").validationEngine('validate')));

This will give you a true or false value, and based on that you can show or hide the button.

Initially hide the button using:

$(document).ready(function() 
{
  $("#ButtonSubmit).hide();
}

edited Jul 19 '12 at 17:17

answered Jul 12 '12 at 15:22

osaka

328
3
11

Wrong validate plugin, sorry! :) – Ryley Jul 12 '12 at 16:37
@Ryley I was just giving her an idea unlike u down voting others help ..gr8 job – osaka Jul 12 '12 at 21:30
Well, I don't know how to solve this problem, but I do know that your answer suggests using a completely different plugin, so your answer is useless at best, misleading at worst. That's what [downvotes](http://stackoverflow.com/faq#behonest) are for, it's nothing personal! – Ryley Jul 12 '12 at 22:44

Disable submit button until form is valid

2 Answers2