CODEWITHSUNDEEP
jquery
N. Sch
N. Sch

Reputation: 687

Best Way To Disable Button In Form When Required Fields Are Not Entered

The code below disables the submit button of form if all required fields are not filled out. Problem is if it is filled out then afterwards erased the button stays enabled. How do I fix that?

$(".submit").prop('disabled', true);
$('.required').keyup(function () {
    if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() ===  $(".confirm_password").val()) {
        $(".submit").prop("disabled", false);

    }
});

Upvotes: 0

Views: 2225

Answers (4)

Dekel
Dekel

Reputation: 62576

Here is a CSS only solution with. Not always we should jump on the javascript solutions :)

#frm1:invalid #btn1 {
  pointer-events: none;
  cursor: not-allowed;
  color: graytext;
}
<form id="frm1">
  name: <input name="n1" type="text" required="required" /><br />
  phone: <input name="n2" type="text" required="required" /><br />
  mail: <input name="n3" type="text" required="required" /><br />
  check: <input name="n4" type="checkbox" required="required" /><br />
  radio: <input name="n5" type="radio" required="required" /><br />
  <input id="btn1" type="submit" value="click" />
</form>

It's important to note that if someone will hit the enter inside the form - it will be sent (because there is not way to control the "disabled" attribute of the submit button from CSS). This solution is for styling only.

The click on the submit button was disabled using the pointer-events.

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

You should probably change the button to be disabled by default, as it makes no sense to disable the form for the first time only when the first thing is typed in a required field.

You should probably encapsulate this behavior into a function that can be called on different events. For example, if your form is pre-populated, perhaps you want to run this check on page load to set initial button state in addition to calling this function during changes in data.

I consider would binding this to change event for the relevent form fields rather than keyup. Key up might be valuable to bind against if you wanted to give individual field validation feedback while user is typing, but is it really meaningful to try to change the button enabled/disabled status for every key press?

I would echo thoughts of @LouysPatriceBessette that you should not need to hard-code field names here if you already have a class defined for the required fields that you can easily select against and iterate to validate the values are non empty strings.

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Here is a way to ensure ALL .required elements will be filled before the submit button can get enabled.

The function does not depends of a list of "specific" fields.
Only the .required class is enought.

So the HTML is easier to maintain.

$(".submit").prop('disabled', true);

$('.required').keyup(function () {

    // Each time a check is performed, consider the button disabled as a start.
    $(".submit").prop('disabled', true);


    // Set a var to use as a "flag".
    var requiredAllCompleted = true;

    // Cycle through them all.  
    $('.required').each(function(){
        if( ($this).val() == "" ){
            requiredAllCompleted = false;
        }
    });

    // If all required fields not empty
    if ( requiredAllCompleted){

        // Additional check for password match.
        if( $(".password").val() ===  $(".confirm_password").val()) {

            // Unlock the submit button.
            $(".submit").prop("disabled", false);
        }
    }
});

Upvotes: 0

j08691
j08691

Reputation: 207900

Change your if to an if/else:

if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() ===  $(".confirm_password").val()) {
    $(".submit").prop("disabled", false);
} else $(".submit").prop("disabled", true);

Upvotes: 2

Related Questions