Bootstrappvalidator custom form validation

Keywords: less JQuery

Bootstrappvalidator custom form validation

Foreground verification

/**
 * callback
 **/
  inadvanceAmount: {
                    validators: {
                        notEmpty: {message: 'Appointment amount cannot be empty'},
                        numeric: {message: 'Booking amount can only be entered as a number'},
                        callback: {
                            message: '',
                            callback: function(value, validator) {
                                if(CommnUtil.expandTenThousandTimes(value) < PemInadvanceSheetPage.productData.buyOrigin){
                                    validator.updateMessage('inadvanceAmount','callback','The reservation amount is less than the starting investment amount of the current product');
                                    return false;
                                }
                                if(CommnUtil.expandTenThousandTimes(value) > PemInadvanceSheetPage.productData.buyRate){
                                    validator.updateMessage('inadvanceAmount','callback','The reservation amount cannot exceed the amount that can be reserved');
                                    return false;
                                }
                                return true;
                            }
                        }
                    }
                },

updateMessage()

Sometimes, error reminders may not be fixed, such as the example above, but callback can only write one, so the updateMessage method needs to be used. In this method, the official api just introduces it. There is no example. In actual use, it is found that this method is problematic. What is the specific problem? Go to the code directly

       /**
         * Update the error message
         *
         * @param {String|jQuery} field The field name or field element
         * @param {String} validator The validator name
         * @param {String} message The message
         * @returns {BootstrapValidator}
         */
        updateMessage: function(field, validator, message) {
            var $fields = $([]);
            switch (typeof field) {
                case 'object':
                    $fields = field;
                    field   = field.attr('data-bv-field');
                    break;
                case 'string':
                    $fields = this.getFieldElements(field);
                    break;
                default:
                    break;
            }

            $fields.each(function() {
                /**Official original**/
                // $(this).data('bv.messages').find('.help-block[data-bv-validator="' + validator + '"][data-bv-for="' + field + '"]').html(message);

                /**
                 * Because the verification prompt used in the project has a div style in the $tips layer, not just message content,
                 * So you need to continue to find the div that displays message in, and then go to updateMessage
                 */
                var $tips = $(this).data('bv.messages').find('.help-block[data-bv-validator="' + validator + '"][data-bv-for="' + field + '"]');
                if($tips.find(".tip_message").html() != undefined){
                    $tips.find(".tip_message").html(message);
                }else{
                    $tips.html(message);
                }
            });
        },

Background interaction (server) verification

orgQualificateCertNum: {
                    validators: {
                        remote: {
                            message: 'Qualification Certificate No. already exists',
                            delay:2000, //In particular, this property must be added, otherwise the user will access the background once entering a word, which will consume a lot of system resources
                            url: DomainUrl("/pemCustomerProduct/checkQualificate"),
                            data: function (validator) {
                                return {
                                    id: validator.getFieldElements('id').val(),
                                };
                            }
                        }
                    }
                }

Posted by sades on Thu, 30 Apr 2020 18:57:37 -0700