How to validate email input field for multiple email separated by comma or semi-clone in Bootstrapvalidator
Question
I've one text area for multiple email input and I want to validate emails with the bootstrap validator. I can't do this because there is an option for multiple which is by default false and I cannot make it true .
For your Reference (bootstrap validator page):http://bootstrapvalidator.votintsev.ru/validators/emailAddress/
<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
<textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
}
});
</script>
2 answers
solution1
0 ACCPTED 2020-01-02 09:09:25
From the link you provided:
When setting options via HTML attributes, remember to enable the validator by setting data-bv-emailaddress="true". You don't need to do that when using HTML 5 type="email" attribute.
Just add those attributes to your textarea: data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"
Test it out:
$(document).ready(function() { $('#emailForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { email: { validators: { notEmpty: { message: 'Email is required and cannot be empty' }, emailAddress: { message: 'The value is not a valid email address' } } } } }); });
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> </head> <body> <form id="emailForm" class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label> <div class="col-sm-8"> <textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email" data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"></textarea> </div> </form> </body> </html>
solution2
0 2023-02-01 19:01:27
Add the tag multiple , like <input type="email" multiple>
See https://www.stefanjudis.com/today-i-learned/email-inputs-can-accept-multiple-email-addresses/
This worked for me to allow comma separated email addresses when using Bootstrap validation.
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.