Enable submit button if atleast one field has filled value

Sorry this might be a duplicate Q , but could not find a direct solution easily,

I have gone through SO answer and found , enable submit if all values are filled ,

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

But how to achieve the same(enable submit) if atleast one field is non-empty

You can try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
    $('.field input').keyup(function() {
        var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length;
    
        $('.actions input').attr('disabled', hasValue ? false : 'disabled');
    });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Update:

$('#username,#password').filter((index, input) => input.value.length > 0).length

This line means we will check the value of the 2 input elements username and password, if all of them don't have any value, the button will be disabled. If you want to check another input element before enabling/disabling, you can add:

$('#username,#password,#input_3,#input_4').filter(...).length

By this way, the button will be disabled when username, password, input_3 and input_4 elements don't have any value. Make sure you have a specific id for each input element.

Update 2:

Checking for both username and password have some value:

var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length === 2

Checking for field, field4 and field5 have some value:

var hasValue = $('#field,#field4,#field5').filter((index, input) => input.value.length > 0).length === 3

You could with Jquery.map and Array.find

1. Jquery.map().get() is get all the input value length with condition.
2. Array.find will find the any one of the input as valid length of string
3. Then finally the result will be reversely compare prop('disabled', !filled)

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('.field input').keyup(function() {
    var res = $('.field input').map(function() {
        return $(this).val().length != 0
    }).get()
    var filled  = res.find(a=> a == true)
    $('.actions input').prop('disabled', !filled);
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Updated with select option

Required field based .Button only enabled after required field 1 and 3 both are filled

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('.field input,.field select').on('keyup change',function() {
    var res = $('.field input[required],.field select[required]').map(function() {
      return $(this).val().trim().length != 0
    }).get();
    var filled = res.every(a => a == true)
    $('.actions input').prop('disabled', !filled);
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username *</label>
      <input id="username" required type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <label for="password">email *</label>
      <input id="password" required type="password" />
    </div>
    <div class='field'>
      <label for="password">select email *</label>
      <select required>
        <option value="">Select</option>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Use jQuery props method.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }else{
          $(':input[type="submit"]').prop('disabled', true);
        }
     });
 });

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Another way to go about it:

Store the fields, and create a new collection of them each time a key is pressed, filtering each one by its value.

If the length of our empty fields is the same as the length of all fields, disable the button:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
    var $fields = $('.field input');
    
    $fields.keyup(function() {

        var $emptyFields = $fields.filter(function(){
            return !this.value;
        });
        
        $('.actions input').prop('disabled', $emptyFields.length === $fields.length);
    });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Documentation:

• .filter()

• .prop()

You can try this in a simple way, as shown below:

var filled = false;
$('.field input').each(function() {
            if ($(this).val().length > 0) {
                filled = true;
                return;     // just add return means break from loop whenever any field is filled. 
            }
        });

        if (filled) {
            $('.actions input').attr('disabled', false);
        } else {
            $('.actions input').attr('disabled', 'disabled');
        }
    });