简体   繁体   中英

jquery validate, dynamically binding form validation

I am trying to dynamically bind validation on an ajax response for some address validation forms. I have tried a few things, but can't seem to get this working. Here's what I got so far any help is appeciated, all the console.log's are working.

 $('#profileAddresses form').each(function() {
            console.log('each');
            var _id = $(this).prop('id');
            var _idNum = _id.split('-');
            var _input = _idNum[1];
            var line1 = 'profile' + _input + 'Line1';
            var city = 'profile' + _input + 'City';
            var state = 'profile' + _input + 'State';
            var zip = 'profile' + _input + 'Zip';
            var country = 'profile' + _input + 'Country';
            $(this).validate({
                onkeyup: false,
                errorClass: 'error',
                errorElement: 'div',
                onfocusout: false,
                errorPlacement: function(error, element) {
                    error.insertBefore(element);
                },
                rules: {
                    line1: {
                        required: true
                    },
                    city: {
                        required: true
                    },
                    state: {
                        required: true
                    },
                    zip: {
                        required: true,
                        minlength: 5
                    },
                    country: {
                        required: true
                    }
                },
                messages: {
                    line1: {
                        required: 'Please enter a street address.'
                    },
                    city: {
                        required: 'Please select a city.'
                    },
                    state: {
                        required: 'Please select a state.'
                    },
                    zip: {
                        required: 'Please enter a zip code.',
                        minlengh: 'Pleaes enter a valid zip code.'
                    },
                    country: {
                        required: 'Please select a country.'
                    }
                }
            });
        });

This seemed to work incase someone else runs into this problem, just set the validation on the form and then add the rules to the input. I added a class to each so I could change the required message or requirements.

 $('#profileAddresses form').each(function() {
            $(this).validate({
                onkeyup: false,
                errorClass: 'error',
                errorElement: 'div',
                onfocusout: false,
                errorPlacement: function(error, element) {
                    error.insertBefore(element);
                }
            });
            var _id = $(this).prop('id');
            $('#' + _id + ' input').each(function() {
                if($(this).hasClass('profileAddressZip')) {
                    $(this).rules('add', {
                        required: true,
                        messages: {
                            required: 'Required msg.'
                        }
                    });
                }

            });
        });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM