jquery.validate - button disabled until valid email

Question

I am using https://jqueryvalidation.org/ to validate my form on the frontend. The basic "if field is empty - validate" works OK.

But I'd like to the submit button to be initially disabled until a valid email address has been entered. I'd like the button to become enabled as soon as the field becomes valid (on keypress).

So basically I just need to remove the 'btn-disabled' class once its valid.

I'm struggling with the jQuery to add this function/method. Would be grateful if someone can help out.

Heres a slightly simplifed version: http://codepen.io/dagford/pen/kXJpEZ

$(document).ready(function(){

    $("#reset-form").validate({
        rules: {
            emailaddress: {
                required: true,
                email: true
            }

        },
        messages: {
            email: "Please enter a valid email address"
        }

    }); 

});

Possible duplicate: http://stackoverflow.com/a/13031687/6188402 — Washington Guedes, Jul 25 '16 at 12:56

score 2 · Accepted Answer · answered Jul 25 '16 at 13:07

2

you can check if the form is valid after entering the email address. Keep you button disabled by default and remove the disabled attribute once you validate the form.

 $("#emailaddress").on("blur", function(){
    if($("#reset-form").valid())
   {
       $("#btn-reset").removeAttr("disabled");
   }
 });

Code Pen : http://codepen.io/anon/pen/YWLjKX?editors=1010

answered Jul 25 '16 at 13:07

Deep

9,594
2
21
33

1

Cheers Deep. I changed your 'blur' to a 'keypress' and it seems to be what I want. – swisstony Jul 25 '16 at 13:30

score 0 · Answer 2 · answered Jul 25 '16 at 12:59

0

You have attr for this

$('#button1, #button2').attr("disabled", true);

answered Jul 25 '16 at 12:59

CMartins

3,247
5
38
53

Hi Carlos I'm not really concerned with the disabled attribute at this point (although i was planning to add it in later). What i want to know is how to 'do something' (i.e add / remove classes etc) USING the linked validate plugin as soon as a valid email is entered. And by 'soon as' - i mean upon some sort of keypress event – swisstony Jul 25 '16 at 13:08

score 0 · Answer 3 · answered Jul 25 '16 at 13:14

Check this :

<script type="text/javascript">
                 (function() {
                        $('form > input').keyup(function() {
                            var empty = false;
                            $('form > input').each(function() {
                                if ($(this).val() == '') {    // write your code for valid email here
                                    empty = true;
                                }
                            });
                            if (empty) {
                                $('#register').attr('disabled', 'disabled');
                            } else {
                                $('#register').removeAttr('disabled');
                            }
                        });
                    })()
                </script>

jquery.validate - button disabled until valid email

3 Answers3