最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I add phone number & email validation to Kendo-UI Grid? - Stack Overflow

programmeradmin6浏览0评论

Given the grid supplied in the code below, how do I set validation on the phone and email to take advantage of the validation and masked input features kendo provides on this page ()?

For example, if the user types in 5628103322, it should format it as (562)810-3322 as the demo on their page shows. Also if a number that was not entered correctly it should provide an error message.

Same for email, how do we do this?

<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/panies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/panies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/panies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/panies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { type: "string" },
                    email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

UPDATE::

$("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    var input = $('<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });

the grid code above has changed, it almost works perfectly now thanks to the answer below, now I just need to figure out how to add validation to the phone number and email fields so input is required, and correct input.

UPDATE #2

The code below now works perfectly thanks to the answer, just wanted to share it to others that might need help. Something interesting to note is the model rule phonerule has to be named whatever the text in the middle between the dashes of this is data-phonerule-msg. I'm guessing Kendo-UI must look for that when looking for custom rules.

<div id="grid" style="height:100%;"></div>
<script>
    $(window).on("resize", function() {
      kendo.resize($("#grid"));
    });

    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/panies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/panies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/panies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/panies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { 
                        type: "string",
                        validation: { 
                            required: true,
                            phonerule: function(e){
                                if (e.is("[data-phonerule-msg]"))
                                {
                                    var input  = e.data('kendoMaskedTextBox');
                                    //If we reached the end of input then it will return -1 which means true, validation passed
                                    //Otherwise it won't === -1 and return false meaning all the characters were not entered.
                                    return input.value().indexOf(input.options.promptChar) === -1;
                                }
                                return true; //return true for anything else that is not data-phonerule-msg
                            } 
                        } 
                    },
                    email: { type: "string", validation: { required: true, email:true } }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    //pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}"
                    var input = $('<input type="tel" data-phonerule-msg="Invalid Phone Number!" class="k-textbox"  required />');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox" required/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

Given the grid supplied in the code below, how do I set validation on the phone and email to take advantage of the validation and masked input features kendo provides on this page (http://demos.telerik./kendo-ui/maskedtextbox/index)?

For example, if the user types in 5628103322, it should format it as (562)810-3322 as the demo on their page shows. Also if a number that was not entered correctly it should provide an error message.

Same for email, how do we do this?

<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/panies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/panies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/panies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/panies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { type: "string" },
                    email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

UPDATE::

$("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    var input = $('<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });

the grid code above has changed, it almost works perfectly now thanks to the answer below, now I just need to figure out how to add validation to the phone number and email fields so input is required, and correct input.

UPDATE #2

The code below now works perfectly thanks to the answer, just wanted to share it to others that might need help. Something interesting to note is the model rule phonerule has to be named whatever the text in the middle between the dashes of this is data-phonerule-msg. I'm guessing Kendo-UI must look for that when looking for custom rules.

<div id="grid" style="height:100%;"></div>
<script>
    $(window).on("resize", function() {
      kendo.resize($("#grid"));
    });

    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/panies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/panies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/panies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/panies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { 
                        type: "string",
                        validation: { 
                            required: true,
                            phonerule: function(e){
                                if (e.is("[data-phonerule-msg]"))
                                {
                                    var input  = e.data('kendoMaskedTextBox');
                                    //If we reached the end of input then it will return -1 which means true, validation passed
                                    //Otherwise it won't === -1 and return false meaning all the characters were not entered.
                                    return input.value().indexOf(input.options.promptChar) === -1;
                                }
                                return true; //return true for anything else that is not data-phonerule-msg
                            } 
                        } 
                    },
                    email: { type: "string", validation: { required: true, email:true } }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    //pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}"
                    var input = $('<input type="tel" data-phonerule-msg="Invalid Phone Number!" class="k-textbox"  required />');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox" required/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { mand: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>
Share Improve this question edited Jan 25, 2016 at 17:34 Joseph Astrahan asked Jan 25, 2016 at 6:36 Joseph AstrahanJoseph Astrahan 9,09214 gold badges94 silver badges162 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

You should add to column definition custom editor with validation attributes:

{
    field: "email",
    title:"Email",
    editor: function(container, options) {
        var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
        input.attr("name", options.field);
        input.appendTo(container);
    }
}

Update: phone validation: add this attribute to phone input ("phonerule" - is the name of custom validation rule):

data-phonerule-msg="Invalid phone!"

add custom validation rule to schema.model.fields.phone:

phone: {
    type: "string",
    validation: {
        phonerule: function(e) {
            if (e.is("[data-phonerule-msg]"))
            {
                var input  = e.data('kendoMaskedTextBox');
                return input.value().indexOf(input.options.promptChar) === -1;
            }
            return true;
        }
    }
}

You can use this code to add mobile and email validation -

schema: {
        model: {
            id: "id",
            fields: {                   
                mobile: {
                    editable: true, validation: {
                        required: true,
                        Mobilevalidation: function (input) {
                            if (input.is("[name='mobile']")) {

                                if ((input.val()) == "") {
                                    input.attr("data-Mobilevalidation-msg", "Mobile number required");
                                    return /^[A-Z]/.test(input.val());
                                }
                                else {
                                    if (/^\d+$/.test(input.val())) {
                                        if (input.val().length == 10) {
                                            return true;
                                        } else {
                                            input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
                                            return /^[A-Z]/.test(input.val());
                                        }

                                    }
                                    else {
                                        input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
                                        //alert(/^[A-Z]/.test(input.val()));
                                        return /^[A-Z]/.test(input.val());
                                    }
                                    return true;
                                }
                            }

                            return true;
                        }
                    }
                },
                email: { editable: true, type: "email", validation: { required: true } },
            }
        }
    }
发布评论

评论列表(0)

  1. 暂无评论