This is a migrated thread and some comments may be shown as answers.

Show Crud Server validation error beside fields

7 Answers 272 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Chatra
Top achievements
Rank 1
Chatra asked on 14 May 2014, 04:03 PM
Hi,

1) I am looking for how to show one or more server side errors  beside the fields .As of now able to popup database sever error but not sure how to show it beside the column fields.Please find the demo attached below(By default showing the sever error while updating the code Field).
2) For some reason the Validation messages are showing below the fields and not beside the fields in the form as show in the image.

Here is how I have set it up 

01.uwdataSource = new kendo.data.DataSource({
02.                            transport: {
03.                                read: {
04.                                    url: crudServiceBaseUrl + "/GetUnderwriterData"
05.                                },
06.                                create: {
07.                                    url: crudServiceBaseUrl + "/POSTaddUnderwriterData",
08.                                    type: "POST",
09.                                    contentType: "application/json"
10.                                },
11.                                update: {
12.                                    url: crudServiceBaseUrl + "/POSTUnderwriterData",
13.                                    type: "POST",
14.                                    contentType: "application/json"
15.                                },
16.                                parameterMap: function (options, operation) {
17.                                    if (operation !== "read" && options.models) {
18.                                        return kendo.stringify(options.models[0]);
19.                                    }
20.                                },
21.                                error: function (args)
22.                                {
23.                                    if (args.errors) {
24.                                      alert('there was an error');
25.                                      var grid = $("#underwriterGrid").data("kendoGrid");
26.                                     grid.one("dataBinding", function (e) {  
27.                                    e.preventDefault();//cancel grid rebind if error occurs                            
28.                 
29.                                                for (var error in args.errors) {
30.                                                    showMessage(grid.editable.element, error, args.errors[error].errors);
31.                                                }                   
32.                                            });
33.                                        }
34. 
35.                                }
36.                            },
37.       schema: {
38.                                //Define the field which contains the error
39.                                errors: function (response) {
40.                                    return response.error;
41.                                },
42.
43.                },//End of Schema
           });

 uwdataSource.bind("error", dataSource_error);

01.function showMessage(container, Code, errors) {
02.        var validationMessageTmpl = kendo.template($("#message").html());
03.        //add the validation message to the form
04.        container.find("[data-valmsg-for=" + Code + "],[data-val-msg-for=" + Code + "]").replaceWith($(validationMessageTmpl({ field: Code, message: errors[0] })))
05.        // .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
06.    }
07. 
08.function dataSource_error(e) {
09.        alert(e.xhr.responseText); // displays "error"
10.    }

//Index.cshtml
 
 
<script type="text/kendo-template" id="message">
  <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
  </div>
</script>


Thanks,
Chatrapathi chennam

7 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 16 May 2014, 12:43 PM
Hello,

By default the error messages are displayed below the inputs in the grid editor. You could override the styles in order to show them beside the inputs:
.k-tooltip-validation.k-invalid-msg
{
    display:inline-block;   
}
 
.k-invalid-msg .k-callout
{
       display:none;
}

In order to show the messages from the server next to the inputs:
  1. Return a success response with a field with the same name as the one set to the schema.errors configuration(error in this case). Based on the response structure that is currently expected in the dataBinding handler you should return an object assigned to the field that is similar to the one in the snippet below:
    var success = NDatabaseIO.WriterData.UpdateWriter(model.writerID, model);
    if (string.IsNullOrEmpty(success.ErrorString))
    {
        return Request.CreateResponse(HttpStatusCode.OK, model);
    }
    else
    {
        return Request.CreateResponse(HttpStatusCode.OK, new {
            error = new
            {
                Code = new
     {
                    errors = new string[] { success.ErrorString }
                }
            }
        });              
    }
  2. Use the error event to prevent the grid from rebinding using the dataBinding event and add the message in the handler. You should also add a placeholder for the message after the input so that it is found when the client-side validation was never triggered:
    <td>
        <input type="text" id="Code" class="k-input k-textbox" name="Code" data-bind="value:Code"  placeholder="Code" required validationMessage="Please enter code." />            
        <span data-for="Code" class="k-invalid-msg"></span>
    </td>
    function showMessage(container, field, errors) {
        var validationMessageTmpl = kendo.template($("#message").html());
        container.find("[data-for=" + field + "]").replaceWith($(validationMessageTmpl({ field: field, message: errors[0] })));
    }
     
    function dataSource_error(args) {
       if (args.errors) {                                      
            var grid = $("#writergrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();                         
     
                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                }
            });
        }    
    }



Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chatra
Top achievements
Rank 1
answered on 19 May 2014, 04:42 AM
Hi Daniel,

Thanks for the hep and solution really helped.

I could see client validation message showing in-line but server validation message not showing in-line but it is showing below the column field as shown in attachment below.

Thanks,
Chatrapathi Chennam
0
Daniel
Telerik team
answered on 20 May 2014, 02:41 PM
Hi again,

You should remove the inline display:block style from the error template:
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; "
or use an important rule for the display:inline-block style  in order to show the server message in the same way.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chatra
Top achievements
Rank 1
answered on 23 May 2014, 07:48 PM
Hi Daniel,

Thank you for the reply.But for some reason this not working in Chrome for client or sever validation messages.

please see below attachment.

Thanks
Chatrapathi chennam
0
Daniel
Telerik team
answered on 27 May 2014, 10:21 AM
Hi,

Could you check the attached updated project and this screen cast and let me know if I am missing something?

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chatra
Top achievements
Rank 1
answered on 27 May 2014, 05:01 PM
Hi Daniel,

I have quick question regarding response return ;like how to handle one or more server validations from different fields .


Thanks,
Chatrapathi chennam
0
Accepted
Daniel
Telerik team
answered on 29 May 2014, 11:56 AM
Hi,

The logic on the client can already handle errors for multiple fields. On the server, you should add all fields with errors to the error object:
error = new
{
    Code = new
    {
        errors = new string[] { success.ErrorString }
    },
    OtherField = new
    {
    ..
If multiple errors can be shown for a field than you should either set the concatanated string to the errors array or add multiple messages to the array and change the logic in the template to show a all messages:
function showMessage(container, field, errors) {
    var validationMessageTmpl = kendo.template($("#message").html());
    container.find("[data-for=" + field + "]").replaceWith($(validationMessageTmpl({ field: field, messages: errors })));
}
<script type="text/kendo-template" id="message">
  <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em;" data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>
        #for (var i = 0; i < messages.length;  i++) {#
            #:messages[i]# </br>
        #}#   
    <div class="k-callout k-callout-n"></div>
  </div>
</script>


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Validation
Asked by
Chatra
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Chatra
Top achievements
Rank 1
Share this question
or