stackoom
  简体   繁体   中英

BootstrapValidator - Disable specific validation for given field

 原文  2019-01-09 20:59:23  7   2    javascript/ jquery/ validation/ bootstrapvalidator

Question

Is there a way to dynamically disable a specific validator for a field, but still want other validations applied for same field.

Sample code: 

 $(document).ready(function() { $('#registrationForm') .bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { fname: { validators: { notEmpty: { message: 'First name is required and cannot be empty' }, stringLength: { min: 6, max: 30, message: 'First name must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9]+$/, message: 'First name can only consist of alphabetical and digits' } } }, lname: { validators: { notEmpty: { message: 'Last name is required and cannot be empty' }, stringLength: { min: 6, max: 30, message: 'Last name must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9]+$/, message: 'Last name can only consist of alphabetical and digits' } } } } }) .on('error.validator.bv', function(e, data) { data.element .data('bv.messages') .find('.help-block[data-bv-for="' + data.field + '"]').hide() .filter('[data-bv-validator="' + data.validator + '"]').show(); }); }); $(document).on("change keyup paste", "#fName", function () { if($('#fname').val()==="") { $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', true); } else { $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', false); } });
 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script> </head> <body> <form id="registrationForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">First Name</label> <div class="col-sm-4"> <input type="text" autocomplete="off" class="form-control" name="fname" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Last Name</label> <div class="col-sm-4"> <input type="text" autocomplete="off" class="form-control" name="lname" /> </div> </div> <div class="form-group"> <div class="col-sm-5 col-sm-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </form> </body> </html>

In this example, I want to dynamically disable validation for notEmpty but still want to see validation message for stringLength

I've tried below code, but without any luck

$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', 'notEmpty', false);

--- Update ---

Updated the example to make it simple.

I've first name and last name fields. If first name is entered then last name is not mandatory. Which means I don't need validation message for notEmpty . But if user decides to enter a value for last name, then it should meet other remaining validations stringLength and regexp .

2 answers

solution1
 1 ACCPTED  2019-01-14 19:27:33

You messed up parameters orders. According to source code it should be: field , enabled , validatorName :

$('#registrationForm').bootstrapValidator('enableFieldValidators',
  'username', false, 'notEmpty');

I've tested in your snippet and it works.

solution2
 0  2019-01-12 02:26:30

I hope you helpful this

 $(document).ready(function() { $('#registrationForm') .bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { validators: { notEmpty: { message: 'The username is required and cannot be empty' }, stringLength: { min: 6, max: 30, message: 'The username must be more than 6 and less than 30 characters long' }, regexp: { regexp: /^[a-zA-Z0-9]+$/, message: 'The username can only consist of alphabetical and digits' } } } } }) .on('error.validator.bv', function(e, data) { data.element .data('bv.messages') .find('.help-block[data-bv-for="' + data.field + '"]').hide() .filter('[data-bv-validator="' + data.validator + '"]').show(); }); }); $(document).on("change", "#inlineCheckbox1", function () { if($(this).is(":checked")) { $('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', true,'notEmpty'); } else { $('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', false,'notEmpty'); } });
 #registrationForm{ padding:2rem; }
 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script> </head> <body> <form id="registrationForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">Username</label> <div class="col-sm-4"> <input type="text" autocomplete="off" class="form-control" name="username" /> </div> </div> <div class="form-group"> <div class="col-sm-5 col-sm-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> <div class="form-group"> <label for="inlineCheckbox1">Validate</label> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> </div> </form> </body> </html>

暂无
暂无

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.

Related Question bootstrapValidator-enable and disable field validation enable and disable field validation using bootstrapValidator Conditional validation with BootstrapValidator BootstrapValidator conditional validation BootstrapValidator skip validation if empty bootstrapValidator skip certain field Revalidate field using BootstrapValidator How to disable submit button until validation passed in specific field BootstrapValidator how to find rules for a field How to disable validating empty fields with bootstrapvalidator?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM