簡體   English   中英

如何防止Bootstrap驗證在表單提交之前顯示錯誤消息?

[英]How to prevent Bootstrap validation to show error messages before form submit?

我正在使用Bootstrap 4驗證,並且有一些條件字段顯示在單選按鈕更改上。 現在,當我更改選項卡時,即使沒有類has-warning它也會顯示驗證消息

這是我的js:

    $('#register_form')
    .find('[name="cms_frontuserbundle_frontuser[usertype]"]')
    .change(function (e) {
        var usertype = $(this).val();
        if (usertype == "institution") {
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[companyName]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[contactName]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryContactName]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[position]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryPosition]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryCountrydialcode]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryContactNumber]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryEmail]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[companyType]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[dateOfBirth]', false);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[companyName]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[contactName]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryEmail]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryContactName]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryCountrydialcode]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryContactNumber]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[position]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryPosition]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[secondaryEmail]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[companyType]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[firstname]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[lastname]', false);
        } else {
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[dateOfBirth]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[firstname]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[lastname]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[firstname]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[lastname]', true);
            $('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[dateOfBirth]', true);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[companyName]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[contactName]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryEmail]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryContactName]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryCountrydialcode]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryContactNumber]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[position]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[secondaryPosition]', false);
            $('#register_form').formValidation('enableFieldValidators', 'cms_frontuserbundle_frontuser[companyType]', false);

        }
    })
    .end()
    .formValidation({
        framework: 'bootstrap4',
        excluded: ':disabled',
        icon: {
            valid: '',
            invalid: '',
            validating: ''
        },
        fields: {
            'cms_frontuserbundle_frontuser[usertype]': {
                enabled: false,
                validators: {
                    notEmpty: {message: 'This field should not be blank.'},
                    // regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[companyName]': {
                enabled: false,
                validators: {
                    stringLength: {min: 10, max: 50, message: 'Company Name should be at least 10 characters long.'},
                    notEmpty: {message: 'This field should not be blank.'},
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[contactName]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Contact Name should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[secondaryContactName]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Contact Name should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[position]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Position should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[secondaryPosition]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Position should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[companyType]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Company Type should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[email]': {

                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    emailAddress: {
                        message: 'Email should be valid.'
                    },
                    stringLength: {
                        message: 'Email should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[secondaryEmail]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    emailAddress: {
                        message: 'Email should be valid'
                    },
                    stringLength: {
                        message: 'Email should be at least 3 characters long.',
                        min: 3,
                        max: 50
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[country]': {
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[countrydialcode]': {
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[secondaryCountrydialcode]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[cityname]': {
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'City Name should be at least 3 characters long.',
                        min: 3,
                        max: 25
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[firstname]': {

                validators: {
                    stringLength: {
                        message: 'First Name should be at least 3 characters long.',
                        min: 3,
                        max: 25
                    },
                    notEmpty: {message: 'This field should not be blank.'},
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[lastname]': {
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    stringLength: {
                        message: 'Last Name should be at least 3 characters long.',
                        min: 3,
                        max: 25
                    },
                    regexp: {regexp: onlyLetters, message: 'Only Letters allowed.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[contactNumber]': {
                validators: {
                    stringLength: {max: 25, message: 'Contact Number should be max 25 characters long.'},
                    notEmpty: {message: 'This field should not be blank.'},
                    regexp: {regexp: onlyNumbers, message: 'Contact Number is not valid.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[secondaryContactNumber]': {
                enabled: false,
                validators: {
                    stringLength: {max: 25, message: 'Contact Number should be max 25 characters long.'},
                    notEmpty: {message: 'This field should not be blank.'},
                    regexp: {regexp: onlyNumbers, message: 'Contact Number is not valid.'},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[plainPassword][first]': {
                validators: {
                    stringLength: {min: 8, message: 'Contact Number should be atleast 8 characters long.'},
                    notEmpty: {message: 'This field should not be blank.'},
                    securePassword: {
                        message: ' '
                    }
                }
            },
            'cms_frontuserbundle_frontuser[plainPassword][second]': {
                validators: {
                    identical: {
                        field: 'cms_frontuserbundle_frontuser[plainPassword][first]',
                        message: '<br>The password and confirm password are not the same.'
                    },
                    notEmpty: {message: ' '},
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[dateOfBirth]': {
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    blank: {}
                }
            },
            'cms_frontuserbundle_frontuser[terms]': {
                validators: {
                    notEmpty: {
                        message: 'This field should not be blank.'
                    },
                    choice: {
                        min: 1,
                        max: 1,
                        message: ' '
                    }
                }
            },

        }
    })
    .on('success.form.fv', function (e) {
        e.preventDefault();
        var grecaptcharesponse = $('#g-recaptcha-response').val();

        var $form = $(e.target),
            formId = '#' + $form[0].id;

        var valid = googleRecaptchaVerification();
        if (!valid) {
            $(formId).find('button[type=submit]').removeAttr('disabled').removeClass('disabled');
            return false;
        }
         $('#g-recaptcha-response').val(grecaptcharesponse);
        $form.hide();
        $(".login_loader").show();
        $.ajax({
            type: 'post',
            url: '',
            data: $(formId).serialize(),
            dataType: 'json',
            success: function (response) {
                $(".login_loader").hide();
                var fv = $(formId).data('formValidation');

                if (response.status == true) {

                    $form.hide();

                    var register_thanks_msg = $('.register_thanks_msg');

                    // Then reset the form
                    $('.alert-success').addClass('in');
                    //*********************
                    register_thanks_msg.show();
                    $('html, body').animate({
                        scrollTop: register_thanks_msg.offset().top
                    }, 800);
                    setTimeout(function () {
                        window.location = response.redirect_url;
                    }, 5000);

                } else {
                    $form.show();
                    $('.login_loader').hide();
                    if (response.message != '') {
                        $('.errors').html('<li>' + response.message + '</li>')
                    }
                    for (var field in response.errors) {
                        fv.updateMessage(field, 'blank', response.errors[field])
                            .updateStatus(field, 'INVALID', 'blank');
                    }
                    animateToError(response.errors);
                }
            }
        });
    });

這是我的表單圖像:

在此處輸入圖片說明

當我單擊機構時,它將以黑色顯示驗證消息,直到我單擊“提交”按鈕后,該消息才會出現。

在此處輸入圖片說明

通過移除修復

$('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[companyName]', true);

驗證中的重新驗證事件。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM