0

I find this link Disable submit if inputs empty jquery to be sure that the code I write is ok. They look same, but when I execute mine, and try to fill form from the latest input (from bottom to top, inn any of my forms), the submit button is activate.

What am I doing wrong please? Here is the example of my code for login form:

$(document).ready( function() {
  $('#login input').on('keyup', function() {
    let empty = false;

    $('#login input.required').each(function() {
      empty = $(this).val().length == 0;
    });

    if (empty)
      $('#login #submit').attr('disabled', 'disabled');
    else
      $('#login #submit').attr('disabled', false);
  });
});
Cutis
  • 949
  • 1
  • 13
  • 32

4 Answers4

2

#1 Check your selectors. A selector like this #login #submit might select the right element, but since IDs have to be unique in HTML to make it valid, it is redundant to have the #login preceeding the #submit.

#login input.required should be #login input[required].

#2 In Addition to that you have an error in your condition.

$('#login input.required').each(function() {
  empty = $(this).val().length == 0;
});

This basically only checks your last element. If the second to last element is empty, but your last element is not your variable empty will be false although you actually have empty fields.

To avoid that, you need to break out of the each loop as soon as you find an empty field, or only overwrite the variable if you find an empty field.

$('#login input.required').each(function() {
  empty = $(this).val().length == 0;
  return false; 
});

#3 Always use trim() to check if a value is truely empty! 

$('input').on('keyup', isValid);

function isValid() {
    let requiredInputs = $('input[required]');
  let emptyField = false;
  $.each(requiredInputs, function() {
    if( $(this).val().trim().length == 0 ) {
        emptyField = true;
        return false;
    }
  });
  if(!emptyField) {
    $('button').attr('disabled', false);
  }else{
    $('button').attr('disabled', true);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" required="required" />
<input type="text" />
<input type="text" required="required" />
<input type="text" required="required" />
<button disabled="disabled">
Submit
</button>
Lapskaus
  • 1,709
  • 1
  • 11
  • 22
0

For any reason,

...
empty = $(this).val().length == 0;
...

does not work but this does:

...
if ($(this).val().length == 0) {
    empty = true;
}
...

I check it in the guy jsfiddle, http://jsfiddle.net/JamesHill/2Cm9p/, he used the second form and it works. So I understand the comment following his answer:

empty = $(this).val().length == 0 is not the same with your sample code on jsfiddle.net and it is not completely correct since the empty flag will only depend on the last input value

This explains my issue. I think he needs to update his answer. Or maybe there is something I never understand well about jquery. Thank you all

Cutis
  • 949
  • 1
  • 13
  • 32
0

Using jQuery .map() method together with Array#some() method you can do that check in a step or two. The some() method returns value of type boolean which can be used to set disabled property of the submit button:

$('input[required]').on('input', function() {
    //Get current values of all required fields
    const vals = $('input[required]').map((i,f) => f.value).get(); //array
    //Is any empty
    const empty = vals.some(v => v.trim() === ''); //boolean
    //set disabled property of submit button
    $('input.submit').prop('disabled', empty);
})
//set initial state of submit button
.first().trigger('input');


$(function() {
    $('input[required]').on('input', function() {
        //Get current values of all required fields
        const vals = $('input[required]').map((i,f) => f.value).get(); //array
        //Is any empty
        const empty = vals.some(v => v.trim() === ''); //boolean
        //set disabled property of submit button
        $('input.submit').prop('disabled', empty);
    })
    //set initial state of submit button
    .first().trigger('input');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" required="required" /><br>
<input type="text" /><br>
<input type="text" required="required" /><br>
<input type="text" required="required" /><br>
<input type="submit" value="Submit" class="submit">
</form>
PeterKA
  • 24,158
  • 5
  • 26
  • 48
-1

use this loop it will solve your problem

    for (var i = 0; i < $('input').length-1; i++) {
        empty = $($('input')[i]).val() == 0;
        if (empty == true) {
            break;
        }
    }

don't use 'this' because it only fetches that input element so your loop is not working properly and one more thing we can not use break in each loop that's why we are using here for a loop.

owais shahab
  • 44
  • 7