Is there a way to control the position of validation messages.

2 Answers 5347 Views
Validation
Todd
Top achievements
Rank 1
Todd asked on 29 Dec 2011, 02:42 AM
My validation messages are floating over the datetime control. Beneath the dropdownlist and right next to input controls. Is there a way to set the position of the controls?

2 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 29 Dec 2011, 01:55 PM
Hello Todd,

The problem is that you set the validation to an input, which later gets wrapped in several other elements during initialization. However the Validator uses the original input to show its message beside it, thus covering other elements. To force it to use specific place for its hint, place a span with data-for="your_input_id" and class="k-invalid-msg", so that the Validator can recognize and use it. Something like this:
<label for="search">Movie</label>
<input type="search" id="search" name="search" required validationMessage="Please select movie"/>
<span class="k-invalid-msg" data-for="search"></span>


Unfortunately it seems we missed documenting this feature, so I'm noting it and updating your points for the find.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Beth
Top achievements
Rank 1
commented on 16 Mar 2012, 04:28 AM

Hi,

We are using less css to build a form where input elements are placed beside one another as opposed to on top of each other (e.g. input field for first name is next to input field for last name). We seem to be having issues getting the validation messages to position correctly. No matter what we try, the validation message places itself beside the input field which then causes the other fields to move over and are thus no longer aligned. We tried your suggestion of positioning the span but still get the same issue. Any suggestions?

Thanks,
Beth
Kamen Bundev
Telerik team
commented on 16 Mar 2012, 10:07 AM

Hi Beth,

I will need to reproduce the issue in order to help you. Can you send some sample code or a live URL where I can see what happens? 

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Beth
Top achievements
Rank 1
commented on 16 Mar 2012, 11:25 PM

Hi Kamen,

I attached the sample code along with an image of how the error looks. 

Thanks 
Beth

Hem
Top achievements
Rank 1
commented on 20 Mar 2012, 03:02 PM

hi

in order to fix that issue i think you need to change the position to absolute instead of relatives.

.k-tooltip-validation
{
    position:absolute ;
  margin-left or right : give the exact position where you would like to show the message.
}

hope this work

thanks

 
Beth
Top achievements
Rank 1
commented on 20 Mar 2012, 06:34 PM

Yep, thanks - had tried this already (actually, it's the first thing I tried) and no dice.  Since I have two form fields floated next to each other, giving absolute positioning to the error messages results in the error messages overlapping each other, not to mention screwing up the float on the form fields...  The floated form fields are contained within a <p> tag which has relative positioning.  And no, giving relative positioning to the fields themselves plus absolute positioning to the error message does not fic the positioning problem either.

Also, the relevant CSS is: 

span.k-tooltip
{
    position: static;
    display: inline-block;
    border-width: 1px;
    padding: 2px 5px 1px 6px;
}

If Kendo UI help team doesn't respond to me, do I still get a support request deducted from my total?
Kamen Bundev
Telerik team
commented on 21 Mar 2012, 10:09 AM

Hello Beth,

Note that the forums are a community resource - we monitor them, but we do not guarantee a timely reply. To use Kendo's support services that are included in the commercial license, you need to submit a support ticket.

Back to the question - position absolute is needed in this case if you want to preserve the layout, but unfortunately you will also need additional elements to snap the absolute position to. Check the modified code, I've added some spans around your inputs:
<style type="text/css">
    span.k-tooltip
    {
        position: absolute;
        display: block;
        width: 100%;
        border: 1px solid #adff2f;
        padding: 0;
        top: 36px;
        left: -1px;
        color: green;
    }

    #email-registration #email {
        width: 380px;
    }

    #email-registration p {
        position: relative;
    }

    #email-registration p > span {
        position: relative;
        display: inline-block;
    }

    #email-registration .text {
        outline: 0;
        width: 176px;
        padding: 0 12px;
        height: 36px;
        line-height: 36px;
        float: left;
        font-size: 16px;
        font-family: "Open Sans", Arial, Helvetica, sans-serif;
        color: #666;
        border: 1px solid #DDD;
        -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
        -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }
</style>
</head>
<body>
<form action="" method="post" id="email-registration" style="width: 500px;">
      <p>
        <span><input type="text" id="firstname" name="firstname" class="text" placeholder="First Name" required validationMessage="Please enter your first name." /></span>
        <span><input type="text" id="lastname" name="lastname" class="text" placeholder="Last Name" required validationMessage="Please enter your last name." /></span>
      </p>
      <p>
        <span><input type="email" id="email" name="Email" class="text alt" placeholder="Email Address" required data-email-msg="Email format is not valid." /></span>
      </p>
      <p>
        <span><input type="password" id="password" name="password" class="text" placeholder="Password" required validationMessage="Please enter a password." /></span>
        <span><input type="password" id="password_confirm" name="password_confirm" class="text" placeholder="Retype Password" required validationMessage="Please confirm password." /></span>
      </p>
      <p>
        <span>
            <input type="checkbox" id="accept" name="Accept" class="check" required validationMessage="You must agree to the Terms of Service." />
            <span>By signing up, I agree to the Net Mind's <a href="#">Terms of Service</a>.</span>
        </span>
      </p>
      <p>
        <button id="save" type="submit" class="submit smu" value="Sign Me Up" />
      </p>
</form>


Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Vadivel
Top achievements
Rank 1
commented on 25 Apr 2012, 06:02 AM

sir,

i need error message with placeholder option, this not working in ie browsers, plz give me solutioons
Vadivel
Top achievements
Rank 1
commented on 25 Apr 2012, 06:04 AM

above example code doesn't have placeholder text in ie, i need error message with that text
Chris
Top achievements
Rank 1
commented on 20 Sep 2012, 04:25 PM


Dan Cornish
Top achievements
Rank 1
commented on 07 Nov 2013, 12:18 PM

Kamen,

Is there a reason that when calling validator.validate() the validation tool tips actually move elements on the page, as opposed to hovering over them (see kendoDemo)?

I'm running into an issue where I need to call validate() on a focusout() event of an input.  Doing so causes the tool tips to move elements on the page (see Image 2).

However, when I click the Update button, the tool tips hover over the other elements, which is what I want to happen but gives an inconsistent look and feel (see Image 3).

How can I make the tool tips hover when calling validate()?

Thanks.

Alexander
Top achievements
Rank 1
commented on 07 Nov 2013, 09:19 PM

deleted

Praveen
Top achievements
Rank 1
commented on 24 Apr 2014, 10:51 AM

Hi,

How can I make validation messages to use available space.Please seeattachedscreen shot.Here the problem is text boxes are tilting .


I used  <span data-for='attendee' class='k-invalid-msg'/> as suggested above.But it's not working.(please see below code).To change .k-tooltip-validation, please suggest in which file(name of kendo file) I need to do the change.

<td >@(Html.Kendo().MaskedTextBox()
.Name("attendee")
.Mask("")
.Value(Model.attendee)
.HtmlAttributes(new { style = "width: 100%; background-color:#F0F0F0", required = "required" })
.Enable(false)

)
<span data-for='attendee' class='k-invalid-msg'/>

</td>
Dimo
Telerik team
commented on 29 Apr 2014, 09:52 AM

Hi Praveen,

You are using a table-based layout, and table cells by default have a vertical-align:middle style applied. You can set a different vertical alignment, e.g. top to preserve the textboxes' horizontal alignment.

The Kendo UI Validator's source is inside kendo.validator.js.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steven
Top achievements
Rank 1
answered on 16 May 2014, 06:59 PM
not sure if original problem ever had a soltuon posted but this worked for me. The relevant part being the margin-right. It pushes the validation message off the calendar icon

<input id="pldatepicker" value="" style="width:150px;margin-right:30px;" placeholder="Date..." required validationmessage="Please enter a valid date" />
Jeff
Top achievements
Rank 1
commented on 21 Aug 2014, 07:33 PM

Steven,

I also had to use your trick of an inline style with margin-right to keep the tooltip in the Scheduler's Custom Editor Template.  No matter what, the custom template ignored my <span class="k-invalid-msg" data-for="xxx"/> and it created it own which always overlapped the icons of the Date/Time pickers.

Great trick sure wish we could reliably specify where Kendo should paint validation messages.

Jeff
Nisarg
Top achievements
Rank 1
commented on 29 Dec 2014, 07:09 PM

Hi there,

I am trying to validate a form which is inside of a kendoWindow using kendoValidator. But the validation messages overlap each other. I tried adding a span tag adjacent to the inputs but does not work.

Please take a look at my example in the dojo link below.

http://dojo.telerik.com/EgOre/5

Note: To open the window, select a category in the panelbar and click on "Add". I have made quantity and client required.

Dimo
Telerik team
commented on 30 Dec 2014, 09:10 AM

Hello Nisarg,

Validated inputs require a name attribute, otherwise validation will not work properly. Moreover, form fields require name attributes in general, in order to be submitted.


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Abhishek
Top achievements
Rank 1
commented on 24 Jan 2019, 06:21 PM

I am having similar issue. I have MVC grid where i use editor template for some fields. The fields for which I have used a combobox have validation tooltip cut off or hidden behind  the next row. See the image. Any ideas why this might be happening ?

 

 

Tsvetomir
Telerik team
commented on 29 Jan 2019, 02:48 PM

Hi Abhishek,

By default, the tooltip that is shown when the validation is triggered is positioned within the content of the grid. The content of the grid is below the header row and above the pager. It is expected to get hidden by the pager when the content is scrolled. 

However, if it gets hidden by the next row, there might be custom CSS styles which interfere with the default ones. In order to make the tooltip show over the next row set its overflow CSS rule to visible:

<style>
    div.k-widget.k-tooltip {
        overflow: visible;
    }
</style>


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Validation
Asked by
Todd
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Steven
Top achievements
Rank 1
Share this question
or