Custom Validation Not Working

2 posts, 0 answers
  1. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 19 Nov 2015 Link to this post

    My custom validation isn't working so modified a demo in the dojo and it didn't work as well.

     

    01.<!DOCTYPE html>
    02.<html>
    03.<head>
    04.    <meta charset="utf-8">
    05.    <title>Kendo UI Snippet</title>
    06. 
    13. 
    14.    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    16.</head>
    17.<body>
    18.   
    19.<div id="myform" data-name="my-form">
    20.    First <input name="firstname" /> Last <input name="lastname" /> <br /><br/>
    21.    <button id="save">Save</button> <button id="reset">Reset</button>
    22.    <div id="errors"></div>
    23.  <div id="user"></div>
    24.</div>
    25. 
    26.<script>
    27.    // attach a validator to the container and get a reference
    28.    //var validatable = $("#myform").kendoValidator().data("kendoValidator");
    29. $("[data-name=my-form]").kendoValidator({
    30.            rules: {
    31.                validName: function (input) {
    32.                                    if (input.is('[name=lastname]') || input.is('[name=firstname]')) {
    33.                        var first = $('[name=firstname]').val();
    34.                        var last = $('[name=lastname]').val();
    35. 
    36.                        return !(first === "" && last === "");
    37.                    }
    38.                    return true;
    39.                }
    40.            }
    41.            , messages: {
    42.                validName: "First or Last name is required."
    43.            }
    44.  });
    45.    $("#save").click(function() {
    46.      var form = $("[data-name=my-form]");
    47.      var validatable = form.kendoValidator().data("kendoValidator");
    48.      //validate the input elements and check if there are any errors
    49.      if (validatable.validate() === false) {
    50.        // get the errors and write them out to the "errors" html container
    51.        var errors = validatable.errors();
    52.        $(errors).each(function() {
    53.          $("#errors").html(this);
    54.        });
    55.         
    56.      }
    57.        else{
    58.             $("#errors").html(''); 
    59.             $('#user').html($('[name=lastname]').val() +', '+ $('[name=firstname]').val());
    60.        }            
    61.    });
    62.   
    63.  $('#reset').on('click',function(){ $('#user').html(''); $('input').val('');});
    64.</script>
    65.</body>
    66.</html>

     

    Any ideas?

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 23 Nov 2015 Link to this post

    Hello Shawn,

    The problem that you are facing is due to the fact that you are initializing the validator multiple times. In order to get reference to the validator within the click event handler you need to use the following instead:
    $("#save").click(function () {
        var form = $("[data-name=my-form]");
        var validatable = form.data("kendoValidator");

    Here is a working dojo example with the above modification:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    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
Back to Top