I'm trying to validate multiple required fields. This code currently works for at least one required field is filled out, but I don't know how to make it work so that it works for all required fields. Could someone help me? I should mention that this includes checkboxes and radios as well.

$(document).ready(function(){
        $('input[required]').on('keyup', function(){
            var empty = false, val = '';
            val = $(this).val();
            if (val.length) {
                empty = false;
            } else {
                empty = true;
            }
            if (empty) {
                $('#register').css('opacity', '0.2').attr('disabled', 'disabled');
            } else {
                $('#register').css('opacity', '1').removeAttr('disabled');
            }
        });
    });

CodePudding user response：

Should work like this, i guess.

$(document).ready(function(){
        $('input[required]').on('keyup', function() {
            var empty = false;
            $('input[required]').each(function(){
                var val = $(this).val().trim();
                if(val.length == 0 || typeof val == 'undefined'){
                    empty = true;
                }           
            })
            if (empty) {
                $('#register').css('opacity', '0.2').attr('disabled', 'disabled');
            } else {
                $('#register').css('opacity', '1').removeAttr('disabled');
            }
        });
    });