Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Custom Validation Not Working

1 Answer 1009 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 19 Nov 2015, 10:33 PM

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?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Nov 2015, 11:52 AM
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!
 
Tags
Validation
Asked by
Shawn
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or