Check input has value on each class element then toggle disabled class jQuery

Question

I'm trying to check the values of each input element in my form. It's not working. Can someone help me what I'm doing wrong here? Thanks

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

function formIsInvalid() {
  var flag = false,
    name, date;
  $('.form--group').each(function() {

    name = $(this).find('.thename').val();
    date = $(this).find('.date_of_birth').val().length == 10;
    if (name == "" || date == "") {
      flag = true;
    }
  });
  return flag
}

//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
  //use other static element or document if not works
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});

Answer 1

You can use .trim() method to remove all free space at start of value. And check if value is exist.

LIVE EXAMPLE: https://codepen.io/miladfm/pen/ZgKqNm

HTML

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

CSS

#stepbirth.disabled {
  color: #999;
}

JS

function formIsInvalid() {
  var isFormInvalid = false;
  $('.form--group').each(function() {

    var name = $(this).find('.thename').val();
    var date = $(this).find('.date_of_birth').val();

    if (!name.trim() || !date.trim()) {
      isFormInvalid = true;
    }
  });

  return isFormInvalid
}

$('.form--group').on('keyup','input', function() {
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});

Answer 2

Since there is no in-built disabled property for element 'a', you should create a style for that as mentioned below.

 a.disabled { pointer-events: none; cursor: default; }

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="form--group"> <input class="thename" name="name[]" type="text" /> <input type="text" class="date date_of_birth" name="date[]" /> </div> <div class="form--group"> <input class="thename" name="name[]" type="text" /> <input type="text" class="date_of_birth" name="date[]" /> </div> <a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a> <script> function formIsInvalid() { var flag = false, name, date; $('.form--group').each(function() { if (flag) return; name = $(this).find('.thename').val(); date = $(this).find('.date_of_birth').val(); date = date !== undefined && date.length == 10; flag = !name || !date; }); return flag } //Toggle disbaled class $('.form--group').on('keyup','input', function() { $('#stepbirth').toggleClass('disabled', formIsInvalid()); }); </script> </body> </html>

Answer 3

You can deactivate the button if you find at least one empty field.

Something like

var emptyFields = $('.form--group input:text').filter(function() { return this.value.length == 0; });
$(#button).toggleClass('disabled',emptyFields.length > 0);

Check input has value on each class element then toggle disabled class jQuery

Question

3 answers

solution1
1 2019-07-31 10:25:37

solution2
0 2019-07-31 10:30:23

solution3
-2 2019-07-31 10:13:33

Check input has value on each class element then toggle disabled class jQuery

Question

3 answers

solution1 1 2019-07-31 10:25:37

solution2 0 2019-07-31 10:30:23

solution3 -2 2019-07-31 10:13:33

solution1
1 2019-07-31 10:25:37

solution2
0 2019-07-31 10:30:23

solution3
-2 2019-07-31 10:13:33