Validate array of form fields with jQuery

Question

I'm trying to setup some jQuery to validate an array of fields for a form. I feel like I'm on the right track but the setup doesn't work as I want it to. Currently, if any of the fields in the array have been filled in, the else statement is triggered. But I want to make sure ALL fields in the array are filled in. I'm wondering if I need to create a boolean variable?

(function($) {
    $(document).ready(function() {
        var SubmitBtn = $('#Schedule-Button');
        var SchFirstName = $('#FName');
        var SchLastName = $('#LName');
        var SchAddress = $('#Address');
        var SchCity = $('#City');
        var SchZip = $('#Zip');
        var SchEmail = $('#Email');
        var SchPhone = $('#Phone');
        var SchService = $('#ServiceReq');
        var ApptForm = $('#appt-form');
        var errors = false;
        var SchedulePopup = $('[data-remodal-id=sch-modal]').remodal();

        SubmitBtn.on('click', function(e){
            var required = [SchFirstName, SchLastName, SchAddress, SchCity,  SchZip, SchEmail, SchPhone, SchService];
            e.preventDefault();
            for(i=0;i<required.length;i++){
                var input = required[i];
                if((input.val()== "")){
                    input.addClass('error-field');
                    $('.Sch-Error-Msg').show();
                }
                else{
                    SchedulePopup.close();
                    input.removeClass('error-field');
                    $('.Sch-Error-Msg').hide();
                }
            }
        });
    });
}(jQuery));

I don't think you want to close the popup on the else. You want to close it if all fields are correct? — yeouuu
– yeouuu, Commented Oct 28, 2015 at 19:23

yeouuu · Accepted Answer · 2015-10-28 19:30:13Z

1

I think you want to do something like this:

(function($) {
    $(document).ready(function() {
        var SubmitBtn = $('#Schedule-Button');
        var SchFirstName = $('#FName');
        var SchLastName = $('#LName');
        var SchAddress = $('#Address');
        var SchCity = $('#City');
        var SchZip = $('#Zip');
        var SchEmail = $('#Email');
        var SchPhone = $('#Phone');
        var SchService = $('#ServiceReq');
        var ApptForm = $('#appt-form');
        var errors = false;
        var SchedulePopup = $('[data-remodal-id=sch-modal]').remodal();

        SubmitBtn.on('click', function(e){
            var required = [SchFirstName, SchLastName, SchAddress, SchCity,  SchZip, SchEmail, SchPhone, SchService],
                containsError = false;
            e.preventDefault();

            for(i=0;i<required.length;i++){
                var input = required[i];
                if((input.val()== "")){
                    containsError = true;
                    input.addClass('error-field');
                    $('.Sch-Error-Msg').show();
                }
                else{
                    input.removeClass('error-field');
                    $('.Sch-Error-Msg').hide();
                }
            }
            if (containsError) {
                SchedulePopup.close();
            }
        });
    });
}(jQuery));

answered Oct 28, 2015 at 19:30

yeouuu

1,9233 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dejsa Cocan Over a year ago

This seems to have fixed the problem. Thanks!

Collectives™ on Stack Overflow

Validate array of form fields with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related