2

Although the validation messages in my project are positioned properly (just on the right side) for Textbox, Dropdownlist, etc. one of them is positioned on the left bottom for Editor and the position cannot be changed. So, is there a way to change the position of validation message for the Editor? I just want to change position of the validation message right side to the editor while not touching the position of the other controls. Any help would be appreciated.

View:

<script type="text/javascript">
$(function () {     

    $("form").kendoValidator({
            //Hide Kendo validation message and show as tooltip
            errorTemplate: '<span class="vld vld-danger"><span class="k-icon k-warning" title="${message}"></span></span>'
        });

});
</script>


@Html.LabelFor(m => m.Summary)
@Html.TextBoxFor(m => m.Summary)
@Html.ValidationMessageFor(m => m.Summary)

@Html.LabelFor(m => m.Description, new { @class = "editor-label" })
@(Html.Kendo().EditorFor(m=>m.Description)
    .Name("Description")
    .HtmlAttributes(new { @class = "editor-field", required = "required" })           
)
@Html.ValidationMessage("Description")



<style>
/*Hide Kendo validation message and show as tooltip*/
.vld {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 20px;
    padding: 2px 5px 5px 5px;
    margin-left: 1px;
}
.vld-danger {
    background-color: #F2DEDE;
    border-color: #EED3D7;
    color: #B94A48;
}

.editor-label {
        display: block;
        float: left;
        padding: 0;
        width: 150px;
        margin: 1em 0 0 0;
        padding-right: 14px; 
    }

.editor-field {
    width: auto;
    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;
}
</style>
Jack
  • 1
  • 21
  • 118
  • 236
  • Are you using Kendo Validator or the jQuery Validation plugin? Please don't use the tag for the jQuery Validate plugin when your question is not about that plugin. – Sparky Jul 02 '15 at 15:21
  • Hi Sparky. Yes, I use Kendo Validatior, but some suggestion offering to use jQuery validation may solve the problem as well. On the other hand, the question may be concerned jQuery as much as css. Any idea to solve the problem? Thanks in advance. – Jack Jul 02 '15 at 15:25
  • Only if the Kendo Validator has the same exact methods/options as the jQuery Validate plugin. jQuery Validate has a `errorPlacement` option that you would use to solve this. Otherwise, maybe use the [tag:css] and/or [tag:jquery] tags if that's what you're looking for. However, just because it's similar, please do not use the jQuery Validate tag unless your code is specifically about this plugin. Thanks. – Sparky Jul 02 '15 at 15:28
  • 1
    maybe you can use span with k-invalid and data-for like this [article](http://docs.telerik.com/kendo-ui/framework/validator/overview#customizing-the-tooltip-position) mentioned – himawan_r Jul 02 '15 at 16:27
  • @machun Thanks for reply. I had tried to use the `` before asking the question, but it does not make any sense. Because the class of the validation message still remains `vld vld-danger k-invalid-msg field-validation-error`. How can I override it? – Jack Jul 03 '15 at 07:55
  • 1
    @Christof afaik those way by applying the error template will be positioned on that span, but still you need to apply css to the error template class which is now vld and vld-danger to overide it – himawan_r Jul 03 '15 at 08:01
  • @machun Could you please post a sample code as answer? – Jack Jul 03 '15 at 08:25
  • @machun Now the only problem is regarding to `validation message`. Although I define it in model as "Required", it is displayed as "The Description fields is required" while the other fields' validation messages are displayed correctly. How can I force the validation message in `@Html.ValidationMessage` or `@Html.ValidationMessageFor`? – Jack Jul 03 '15 at 10:54
  • 1
    @Christof have you tried data-[rule]-msg where [rule] is the failing rule, for example if you have `` if you doesnt fill the input which mean you failing the required validation the message will be "define your message here", here's [example](http://dojo.telerik.com/iDUrE), also sory that i'm not using kendo mvc version therefore my answer may not 100% true – himawan_r Jul 03 '15 at 12:48
  • @machun Many thanks for your reply. With the help of your last message, I find what should I used: `data_required_msg'. So, even if you do not use Kendo, you solved the problem and updated my answer :) Thanks a lot again. Voted+ – Jack Jul 03 '15 at 13:52

2 Answers2

1

You can use Adjacent sibling selector to properly position your validation message

.editor-field + span {
    // proper position
}

or even:

.editor-field + span.vld.vld-danger {
    // proper position
}
suvroc
  • 3,058
  • 1
  • 15
  • 29
  • Many thanks for your answer. I have tried lots of combinations with the classes you mentioned, but unfortunately none of them makes any sense. Finally I have solved the problem by originated the way you posted as indicated on [BoltClock's answer](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class). Voted+ – Jack Jul 03 '15 at 09:24
1

Finally I solved the problem as indicated on BoltClock's answer.

<span class="k-editor-val-message">
@Html.LabelFor(m => m.Description, new { maxlength = 1000, @class = "editor-label" })
@(Html.Kendo().EditorFor(m => m.Description)
    .Name("Description") 
    .HtmlAttributes(new { @class = "editor-field", style = "width:660px; height:140px;", 
         required = "required", data_required_msg="Required field"  })
)
@Html.ValidationMessage("Description")
</span>


<style> 
    .k-editor-val-message > .k-invalid-msg {
        // proper position
    }
</style>
Community
  • 1
  • 1
Jack
  • 1
  • 21
  • 118
  • 236
  • lol i do use kendo, but the one that only javascript though not the mvc version :D. glad i could help and +1 for your effort to solve your own problem – himawan_r Jul 03 '15 at 13:59
  • Thanks :) I hope this question will be helpful for those who encounter the same problem... – Jack Jul 03 '15 at 14:04