如何防止引导验证在表单提交之前显示错误消息？
Posted
技术标签:
【中文标题】如何防止引导验证在表单提交之前显示错误消息？【英文标题】：How to prevent Bootstrap validation to show error messages before form submit? 【发布时间】：2019-02-28 22:55:38 【问题描述】：我正在使用 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);
);
);
这是我的表单图片：
当我点击机构时，它会以黑色显示验证消息，直到我点击提交按钮才会出现。
【问题讨论】：
您可以查看文档以禁用模糊验证吗？ 【参考方案1】：通过删除修复它
$('#register_form').formValidation('revalidateField', 'cms_frontuserbundle_frontuser[companyName]', true);
验证中的重新验证事件。
【讨论】：
以上是关于如何防止引导验证在表单提交之前显示错误消息？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ajax 调用中提交表单之前调用 javascript 验证函数