Jquery validate: IF form valid then show submit button

Question

I have a basic blank form and would like to show the submit button only once:

• Data entered on the form.
• All required / valid fields are correct.

Before fading in the submit button, as soon as the form is correct.

Fast jsfiddle: http://jsfiddle.net/36JZL/

<form action="#" method="post"> <label>Name</label> <input type="text" name="name" class="required" value="" /> <label>Email</label> <input type="email" name="email" class="required email" value="" /> <label>Message</label> <textarea name="message" class="required"></textarea> <input type="submit" name="save" value="Save" class="hide" /> </form> $('form').validate(); 

Answer 1

After Alan Buchanan's answer, this might work:

 $('#yourform input,#yourform textarea').bind('oninput', function(){ if ($('#yourform').valid()) $('#submitButton').fadeIn(); }); 

- Notes and links.

Answer 2

Suggest that you run some javascript on the change events of your form input and check to see if each of your checks passes. If it then fades out in the button.

Answer 3

There is no function in jQuery for this. You need to bind the event to the sending of this form or to each of the fields and check the text length of the required fields, and if everything is greater than 0. then you can send the form or fade out to the submit button.

The submnit event will be fired when you press input inside the form in any of the fields.

Take a look at this link.

http://api.jquery.com/submit/