validationmvvmdata-bindingkendo-uikendo-validator

How to validate multiple email with kendo validator?


I would like to validate the email addresses with input html kendo. This is my html code:

<label for="doc" class="required">E-mail</label>
<input type="email" multiple pattern="^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4},*[\W]*)+$" value="" data-bind="value: mail" id="doc" name="mail" required data-email-msg="Email format is not valid" />

I would like the addresses to be separated by a comma, but this doesn't work!is not validate for kendo

enter image description here


Solution

  • Here is working DEMO to validate multiple emails in a single input field separated by semicolon.

    For this I have created a custom Kendo validator rule. The code snippet from the DEMO is show below:

    HTML:

    <input type="text" class="k-textbox" name="Email" id="Email" required data-required-msg="Please enter atleast one email" data-multipleemails-msg="Some of the Entered Email ids are invalid"/>
    

    JS:

    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }
    
                    $(function () {
                        var container = $("#employeeForm");
                        kendo.init(container);
                        container.kendoValidator({
                            rules: {
                                multipleemails: function (input) {
                                    if (input.is("[data-multipleemails-msg]") && input.val() != "")
                                    {                                   
                                      var emailsArray = input.val().split(";");
                                        for (var i=0; i < emailsArray.length; i++)
                                        {
                                          //alert(emailsArray[i]);
                                          //return validateEmail(emailsArray[i].trim());
                                            if ((emailsArray[i].trim() != "") && (validateEmail(emailsArray[i].trim()) == false))
                                          {
                                              return false;
                                          }
                                        }
    
                                    }
    
                                    return true;
                                }
                            }
                        });
                    });
    
    
                    $('#save').click(function() {
                    //alert('save');
                        var validator = $("#employeeForm").data("kendoValidator");
                        if (validator.validate()) {
                            alert("Form is successfully validated");
                        }
    
                    });