Question

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();

Answer 1

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.