Disable submit-button in validation with jquery

Question

I am trying to validate a form using jQuery and what I want to do now is to disable the submit button until all fields are filled correctly. This is my approach: http://jsfiddle.net/w57hq430/

<input type="text" name="commodity">Commodity
<input type="text" name="plz">PLz
        <input type="submit">

and the actual jQuery:

$(document).ready(function() {
var error = null;
$('input[name=commodity]').focusout(function() {
    var com = $('input[name=commodity]').val();
    if($.isNumeric(com)) {
       error ="asd";
    }
    else {
       alert("commodity has to be numeric");
    }

});
    $('input[name=plz]').focusout(function() {
    var com = $('input[name=plz]').val();
    if($.isNumeric(com)) {
       error ="asd";
    }
    else {
       alert("plz has to be numeric");
    }

});


if(error != null) {
 $('input[type=submit]').attr('disabled', 'disabled');
}
else {
    $('input[type=submit]').removeAttr('disabled');

}
});

I know that this code would prevent the submit button from being clicked when all fields are correct as this was meant to be a test if I use mouseout correctly.However,this is not working.The variable error is null even after you enter some numerics into the textfields(which should set it to "asd").Is my variable not accessible by the rest of the code?Or is anything else wrong?

Ian · Accepted Answer · 2014-08-20 13:03:59Z

The reason that the error is null, even after entering text is because you only run this function once, which is when the document has finished loading.

Instead you'll want to validate the fields when their text changes, and handle the disabled flag on the submit button that way.

Additionally, you don't want that var infront of the error field in both of your if statements.

I'd try this isntead, you move the validation into a function (rather than sharing an error variable as you don't know when to null it otherwise) and trigger whenever one of the fields has finished being edited.

You can try it in this JSFiddle

$(document).ready(function() {

    var toggleButton = function() {

        // Check validity of 1st input
        if($.isNumeric($('input[name=commodity]').val()) === false) {
            $('input[type=submit]').attr('disabled', 'disabled');
            error = "commodity has to be numeric";

        // Check validity of 2nd input
        } else if ($.isNumeric($('input[name=plz]').val()) === false) {
            $('input[type=submit]').attr('disabled', 'disabled');
            error = "plz has to be numeric";
        } else {
            $('input[type=submit]').removeAttr('disabled');
        }         
    };

    $('input[name=commodity]').focusout(function() {
        toggleButton();
    });

    $('input[name=plz]').focusout(function() {
       toggleButton();
    });

    // Disable submit button right at the start
    toggleButton();
});

A.T. · Accepted Answer · 2014-08-20 12:55:55Z

1

try to use , it is better to check if form is valid on submit click rather than on each change event of fields...

$(":submit").click(function(){
   if(IsFormValid() == false)
    return false;
});

function IsFormValid()
{
   //Check form fields are valid
  if form is valid
     return true;
  return false;
}

answered Aug 20, 2014 at 12:55

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Comments

Diego Fernando Murillo Valenci · Accepted Answer · 2014-08-20 12:59:08Z

1

maybe if you can, i recommend you to use a jquery plugin which can help you to save time of reinventing the wheel, maybe this one, it let you disable the submit button

answered Aug 20, 2014 at 12:59

Diego Fernando Murillo Valenci

1,4173 gold badges25 silver badges49 bronze badges

1 Comment

teair Over a year ago

Thanks for pointing this out.I actually knew of this plugin,but I wanted to try it the vanilla way ;)

Moshtaf · Accepted Answer · 2014-08-20 12:59:43Z

Your code has some problems, some of them are mentioned in posted answers but some are not, for instance when you have two fields, one error var is not enough in this way and also you don't call button state function in every change.

Try this:

$(document).ready(function() {
    $('input[type=submit]').attr('disabled', 'disabled');
    var IsError1 = 0;
    var IsError2 = 0;
    $('input[name=commodity]').focusout(function() {
        var com = $('input[name=commodity]').val();
        if(!$.isNumeric(com)) {
          alert("commodity has to be numeric");
          IsError1 = 1;
        }else {
            IsError1 = 0;
        }
        setButtonState();
    });
        $('input[name=plz]').focusout(function() {
        var com = $('input[name=plz]').val();
        if(!$.isNumeric(com)) {
          alert("plz has to be numeric");
          IsError2 = 1;
        }else {
            IsError2 = 0;
        }
        setButtonState();
    });

    function setButtonState(){
        if(IsError1 == 0 && IsError2 == 0) {
            $('input[type=submit]').removeAttr('disabled');
        } else {
            $('input[type=submit]').attr('disabled', 'disabled');
        }
    }
});

Check JSFiddle Demo

Collectives™ on Stack Overflow

Disable submit-button in validation with jquery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related