Custom Validation Does Not Work

6 posts, 0 answers
  1. Mark
    Mark avatar
    4 posts
    Member since:
    Feb 2012

    Posted 08 Mar 2012 Link to this post

    [Edited] Ok, rephrasing this question after looking at it again.  I'm trying to use both the HTML5 validation, and then also add one extra check that password and password-confirm contain the same value.  It is working now, however, the message for that extra validation is not overriding the validationMessage value.  Is there a straightforward way to do this?

    And again, your documentation is a nice start, but it really needs more complete examples, and thorough coverage of options and capabilities.  Thanks.

    <html>
      <head>
     
        <link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
     
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
     
      </head>
      <body>
     
        <form id="foo-form" name="foo-form" action="/foo" method="get">
         
          <select id="test-combo" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">SmOption 2</option>
        <option value="3">BlOption 3</option>
        <option value="4">GOption 4</option>
          </select>
          <br />
     
          <label for="org" class="required">Organization</label>
          <input id="org" name="org" required="required"
             type="text" validationMessage="Organization required" />
          <span class="k-invalid-msg" data-for="org"></span><br />
     
          <label for="zip" class="required">Zip Code</label>
          <input id="zip" name="zip" pattern="\d{5}([\-]\d{4})?" required="required"
             type="text" validationMessage="Valid zip code required" />
          <span class="k-invalid-msg" data-for="zip"></span><br />
     
          <label for="fullname" class="required">Name</label>
          <input id="fullname" name="fullname" required="required"
             type="text" validationMessage="Please enter full name" />
          <span class="k-invalid-msg" data-for="fullname"></span><br />
     
          <label for="email" class="required">Email</label>
          <input id="email" name="email" required="required"
             type="email" validationMessage="Valid email required" />
          <span class="k-invalid-msg" data-for="email"></span><br />
     
          <label for="password" class="required">Password</label>
          <input id="password" name="password" required="required"
             type="password" validationMessage="Please enter password" />
          <span class="k-invalid-msg" data-for="password"></span><br />
           
          <label for="password-confirm" class="required">Confirm Password</label>
          <input id="password-confirm" name="password-confirm" required="required"
             type="password" validationMessage="Please confirm password" />
          <span class="k-invalid-msg" data-for="password-confirm"></span><br />
           
          <input id="register-submit" name="register-submit" type="submit" value="Sign Up" />
     
        </form>
     
        <script type="text/javascript">
     
          $(document).ready(function(){
              $("#test-combo").kendoComboBox({
                  filter: "contains",
                  suggest: true,
              });
     
              $("#foo-form").kendoValidator({
                  rules: {
                      verifyPasswords: function(input){
                         var ret = true;
                                 if (input.is("[name=password-confirm]")) {
                                     ret = input.val() === $("#password").val();
                                 }
                                 return ret;
                      }
                  },
                  messages: {
                      verifyPasswords: "What's going on?"
                  }
              });
          });
     
        </script>
     
      </body>
  2. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 10 May 2012 Link to this post

    Mark,

    Did you ever get this working? I'm looking for the same thing right now, and I can't seem to get it either. 

    Any guidance would be appreciated.
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    4 posts
    Member since:
    Feb 2012

    Posted 10 May 2012 Link to this post

    Jeremy,

    I'm pretty sure what I did was to not do any html5 validation on fields that are involved in custom validations.  So, any given field that needs validation is *either* using html5 validation attributes *or* is validated in the custom rules.  

    Hope that helps, I don't believe you can do both like I was originally trying to do.

     - Mark
  5. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 10 May 2012 Link to this post

    Hmm, well that stinks.

    What I as hoping to do was the following:

    If the password confirm was left blank : "please confirm your password"
    If the passwords didn't match: "Your passwords do not match"

    So, what I have now is just "your passwords do not match" 

    Oh well, maybe an admin can come along and help us with this. Seems somewhat straight forward.
  6. Mark
    Mark avatar
    4 posts
    Member since:
    Feb 2012

    Posted 10 May 2012 Link to this post

    I was able to fulfill those same requirements with three custom validations (you may not want the password length validation, so could probably just use the other two).  

    I apologize, the only code I have for this right now is in ClojureScript, and I don't have time to convert it, but it should still be fairly clear what is going on (see form-validator-config at the end):

    (defn password-entered? [input]
      (cond
        (not (.is input "#register-pass")) true
        (not (string/blank? (.val input))) true
        :else false))

    (defn password-length? [input]
      (cond
        (not (.is input "#register-pass")) true
        (>= (count (.val input)) 8) true
        :else false))

    (defn password-confirm-matches? [input]
      (cond
        (not (.is input "#password-confirm")) true
        (= (.val input) (.val ($ "#register-pass"))) true
        :else false))

    (def form-validator-config
      (conv/clj->js
        {:rules {:password-entered password-entered?
                    :password-length password-length?
                    :password-confirm-matches password-confirm-matches?}
         :messages {:password-entered "Password required"
                            :password-length "Must be at least 8 characters"
                            :password-confirm-matches "Passwords do not match"}}))
  7. Mark
    Mark avatar
    4 posts
    Member since:
    Feb 2012

    Posted 10 May 2012 Link to this post

    Actually, I just re-read your comment.  I decided on just one message, whether password-confirm is blank or has a value and doesn't match, I display the message: "Passwords do not match".  I think that is clear for users.  If you absolutely need the two different messages, just add one more custom validation rule/message (one checks for a non-blank value, and the other checks that if there is a value it matches password).
Back to Top
Kendo UI is VS 2017 Ready