4

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

  1. Data has been entered into the form.
  2. All required/valid fields are correct.

Before fading in the submit button once the form is correct.

Quick 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();
John Magnolia
  • 16,769
  • 36
  • 159
  • 270
  • 4
    So what's the problem? Validate the fields and if it passes then fade in the button.... – AGB Oct 23 '12 at 13:22
  • Yes exactly that, but how using jquery validate? – John Magnolia Oct 23 '12 at 13:27
  • I checked the docs which suggests using the `submitHandler`. But inside of this how to I check if the form is valid to show/hide the button. – John Magnolia Oct 23 '12 at 13:28
  • I don't think the submitHandler would work because you want to validate it before it is submitted so that you can display the button. See my answer. – AGB Oct 23 '12 at 13:32
  • you obviously cannot use the submit event which is triggered by the submit not visible yet. instead use the keyup events on each field – mplungjan Oct 23 '12 at 13:33

3 Answers3

6

Following on from Alan Buchanan's answer, this might work:

$('#yourform input,#yourform textarea').bind('oninput', function(){

    if ($('#yourform').valid()) $('#submitButton').fadeIn();

});

- Notes and reference.

Community
  • 1
  • 1
Labu
  • 2,572
  • 30
  • 34
  • Brilliant this works thanks. Just very surprised there isn't a way of extending jquery validate methods, which must already have something very similar checking the form fields on focus/etc – John Magnolia Oct 23 '12 at 13:59
2

Suggest that you fire some javascript on the change events of your form inputs and check whether each one passes your validation. If it does then fade in the button.

AGB
  • 2,378
  • 21
  • 37
-2

There is no function in jQuery to do this. You need to bind an event to the submit of this form or to each of the fields and validate the required fields text length and if all are greater 0. then you can submit the form or fade in the submit button.

The submnit event will be triggered when you hit an enter inside the form in any one of the fields.

Take a look at this link.

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

Manjunath Manoharan
  • 4,567
  • 6
  • 28
  • 43
  • Maybe because it has nothing to do with the [jQuery validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) which is what OP is referring to. PS: I did not downvote – mplungjan Oct 23 '12 at 15:11