title: Kendo UI - Kendo Validator
body: <p>I'm using Kendo UI's validator in my application.</p>
  
  <p>I have a form to update my grid data.</p>
  
  <p>I have customized the validation tool-tips to appear where I want them as I enter each field, and this works fine.
  The result can be seen in the image below.</p>
  
  <p><img src="https://i.stack.imgur.com/PQOwt.png" alt="enter image description here"></p>
  
  <p>However, I am having a problem, that when I submit the form, it appears to revalidate my form, and mess up the location of the tool-tip validation message.</p>
  
  <p>The picture below is what happens when I click the "Update" button (notice, the dialogues overlapping each other).</p>
  
  <p><img src="https://i.stack.imgur.com/sO66k.png" alt="enter image description here"></p>
  
  <p>My preferend goal is to disable the Update button untill the all fields are corrected, or, if that is not possible, to keep the same formatting as the first image.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="ValidationErrors"&gt;
         &lt;span class='k-invalid-msg' data-for="PhoneNumber"  &gt;&lt;/span&gt;
         &lt;span class='k-invalid-msg' data-for="Extension" &gt;&lt;/span&gt;
         &lt;span class='k-invalid-msg' data-for="PreferredContactStartTimeDt" &gt;&lt;/span&gt;
         &lt;span class='k-invalid-msg' data-for="PreferredContactEndTimeDt"&gt;&lt;/span&gt;
         &lt;span class='k-invalid-msg' data-for="TimeZone"&gt;&lt;/span&gt;
          &lt;script&gt;
              $("input").focusout(function () {
                  $("#ValidationErrors").kendoValidator();
                  if ($("input").hasClass("k-textbox k-invalid"))
                  {
                      $(this).css("border", "solid 1px red");
                  }
              });
          &lt;/script&gt;
         &lt;style&gt;
             .k-widget.k-tooltip-validation {
                  margin-bottom:5px;
                  display:block;
                  padding:6px;
             }
             #ValidationErrors {
                  margin-bottom:10px;
             }
              .k-invalid-msg {
                  display:none;
             }
         &lt;/style&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>The button that submit's the form is:</p>
  
  <pre><code>&lt;a class="k-button k-button-icontext k-grid-update" href="#"&gt;&lt;span class="k-icon k-update"&gt;&lt;/span&gt;Update&lt;/a&gt;
  </code></pre>
  
  <p>I should also note, that I can not edit the kendoValidator() function at this point, as this is in development, and I am only trying to update this module, there are to many other forms and validations using that function to make direct changes to it.</p>