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

19 posts, 1 answers
  1. Todd
    Todd avatar
    13 posts
    Member since:
    Dec 2011

    Posted 28 Dec 2011 Link to this post

    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. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Beth
    Beth avatar
    3 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2012 Link to this post

    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
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 16 Mar 2012 Link to this post

    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!
  6. Beth
    Beth avatar
    3 posts
    Member since:
    Mar 2012

    Posted 16 Mar 2012 Link to this post

    Hi Kamen,

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

    Thanks 
    Beth

  7. Hem
    Hem avatar
    11 posts
    Member since:
    Jan 2012

    Posted 20 Mar 2012 Link to this post

    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

     
  8. Beth
    Beth avatar
    3 posts
    Member since:
    Mar 2012

    Posted 20 Mar 2012 Link to this post

    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?
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 Mar 2012 Link to this post

    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!
  10. Vadivel
    Vadivel avatar
    10 posts
    Member since:
    Apr 2012

    Posted 25 Apr 2012 Link to this post

    sir,

    i need error message with placeholder option, this not working in ie browsers, plz give me solutioons
  11. Vadivel
    Vadivel avatar
    10 posts
    Member since:
    Apr 2012

    Posted 25 Apr 2012 Link to this post

    above example code doesn't have placeholder text in ie, i need error message with that text
  12. Chris
    Chris avatar
    1 posts
    Member since:
    Sep 2012

    Posted 20 Sep 2012 Link to this post


  13. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 07 Nov 2013 Link to this post

    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.

  14. Alexander
    Alexander avatar
    19 posts
    Member since:
    Jun 2012

    Posted 07 Nov 2013 Link to this post

    deleted

  15. Praveen
    Praveen avatar
    1 posts
    Member since:
    Apr 2014

    Posted 24 Apr 2014 Link to this post

    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>
  16. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Apr 2014 Link to this post

    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!
     
  17. Steven
    Steven avatar
    32 posts
    Member since:
    Jul 2012

    Posted 16 May 2014 Link to this post

    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" />
  18. Jeff
    Jeff avatar
    7 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2014 Link to this post

    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
  19. Nisarg
    Nisarg avatar
    12 posts
    Member since:
    Dec 2014

    Posted 29 Dec 2014 Link to this post

    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.

  20. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 30 Dec 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready