How to validate email input field for multiple email separated by comma or semi-clone in Bootstrapvalidator

Question

How to validate email input field for multiple email separated by comma or semi-clone in Bootstrapvalidator

3.3k views Asked by milton khondokar At 02 January 2020 at 08:47

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>

Original Q&A

There are 2 answers

emdashii On 01 February 2023 at 19:01

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.

**slesh** · Accepted Answer · 2020-01-02T09:09:25+00:00

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>

TechQA.

How to validate email input field for multiple email separated by comma or semi-clone in Bootstrapvalidator

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in VALIDATION

Related Questions in BOOTSTRAPVALIDATOR

Related Questions in BOOTSTRAP-VALIDATE

Popular Questions

Popular Tags

Trending Questions