Validator messages coalescing to one field

2 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2012 Link to this post

    I am following the “Basic Usage” example.  I am using the variant wherein I specifically create a <span data-for=”id_of_validated_control”> for each field. In  this case, I have two fields, the first being "Name", the second being "Code".

    “Name” and “Code” each have a ‘k-invalid-msg’ span.  Now let’s say I blank out the second field ‘Code’ first.  It’s get “Code is required” message.  So far so good.  Now I put a value in Code, then go to the field above it – “Name” – blank it out, and blur.  I expect the <span> next to "Name" to get a message, but what happens is that “Name is required” displays in the span adjacent to “Code” field, becauseat the moment I tab out of the "Name" field, the <span data-for=”name” class=”k-invalid-msg”/> is removed from the DOM, and Code’s <span> is the one populated.

    I have tried several approaches.  The first approach is to declare my own <span data-for="name_of_validated_input" class="k-invalid-msg></span> after each <input> that has the "required" attribute.  I also tried not declaring my own <span>'s, and applying a validationMessage="xxx is required" to each <input> that has the "required" attribute.

    Here is one of the <input> controls with an explicit <span>.  Note that this is copied from Chrome "inspect element" which is adding the ="" to required. 

    <div class="form-FieldOuter" id="view-FieldBox1" style="display:block;">
    <label for="view-FieldBox1CodeInput" class="form-label" style="overflow:hidden;">Code</label>
    <input type="text" class="form-control" id="view-FieldBox1CodeInput" data-bind="value: Code" required="" validationmessage="Code is required.">
    <span class="k-invalid-msg" data-for="view-FieldBox1CodeInput"></span>
    </div>


    And a couple of notes/comments:
    1. In my program's html output, the attribute doesn't have a value, it looks like <input id="x" name="x" required validationmessage="blah blah"/> 
    2. I've tried also assigning the name attribute.  But I see from other forum post that data-for relates to the 'id' attribute and not the 'name' attribute, so I think my use above should be correct in that regard.  (see: http://www.kendoui.com/forums/framework/validation/is-there-a-way-to-control-the-position-of-validation-messages.aspx , where it says 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 )
    3. I observe that data-role="validator" is being applied to the <div> that contains my form and all of the validated <input> and their <span> elements.
    4. Using kendo.web.js from version 2012.1.322 Full-license not minified.

  2. Mike
    Mike avatar
    3 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2012 Link to this post

    Okay I think I figured this out.  The validated <input> controls require a "name" attribute, and the value of the "name" attribute needs to be assigned to the "data-for" attribute in the k-invalid-msg span, NOT the value of the input's "id" attribute, contrary to the other Forum post response I had referenced, and contrary to the documentation on the Validator's "Basic Usage" page, which says:
    ... adding a span with data-for attribute set to the validated input ID  

    Until I set a unique name attribute on the validated input and assigned that name to it's associated <span>, kendoValidator kept using just one of the span's for it's validation messages for any of the validated inputs.

  3. Kendo UI is VS 2017 Ready
Back to Top