CODEWITHSUNDEEP
javascriptjqueryvalidation
teair
teair

Reputation: 187

Disable submit-button in validation with jquery

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?

Upvotes: 0

Views: 1036

Answers (4)

Ian
Ian

Reputation: 34549

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

Upvotes: 2

Moshtaf
Moshtaf

Reputation: 4903

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

Upvotes: 1

Diego Fernando Murillo Valenci
Diego Fernando Murillo Valenci

Reputation: 1407

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

Upvotes: 1

A.T.
A.T.

Reputation: 26382

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;
}

Upvotes: 1

Related Questions