Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 22 Mar 2024 14:28 by ADMIN
Ming
Created on: 15 Mar 2024 15:10
Category: Kendo UI for jQuery
Type: Bug Report
1
Validator is not working when custom script is generated with gulp

Reproduction of the problem

  1. Follow the steps described in the link here - https://github.com/telerik/kendo-ui-core?tab=readme-ov-file#building-kendo-ui-core
  2. Create a custom script for validator npx gulp custom -c validator
  3. Try to load the script and create the components

Current behavior

The validator is not working, error is shown

jQuery.Deferred exception: $(...).kendoNumericTextBox is not a function

Expected/desired behavior

The components should work as expected when custom script is created


1 comment
ADMIN
Dimitar
Posted on: 22 Mar 2024 14:28

Hello,

The error is caused by not adding the numerictextbox component to the custom script, when building it. To resolve the issue, build the scripts with the following command:

npx gulp custom -c validator,numerictextbox
Then the following setup should work as expected with the produced custom script:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Validator</title>
    <meta name="viewport" content="width=device-width,user-scalable=1,initial-scale=1.0" />
    <link href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="kendo.custom.js"></script>
    <script>
        kendo.setDefaults('iconType', 'font');
    </script>
</head>

<body>
    <div id="validation-summary">
    </div>
    <form id="ticketsForm" class="k-form k-form-vertical">
        <ul class="k-form-group">
            <li class="k-form-field">
                <label for="amount" class="k-form-label">Amount</label>
                <span class="k-form-field-wrap">
                    <input id="amount" name="amount" type="text" min="1" max="10" value="1" required
                        data-max-msg="Enter value between 1 and 10" />
                    <span class="k-invalid-msg" data-for="amount"></span>
                </span>
            </li>
            <li class="k-form-buttons">
                <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md"
                    type="submit">Submit</button>
            </li>
        </ul>
    </form>
    <script>
        $(document).ready(function() {
            $("#amount").kendoNumericTextBox();

            var validator = $("#ticketsForm").kendoValidator().data("kendoValidator");
            var validationSummary = $("#validation-summary");

            $("form").submit(function(event) {
                event.preventDefault();

                if (validator.validate()) {
                    validationSummary.html("<div class='k-messagebox k-messagebox-success'>Hooray! Your tickets have been booked!</div>");
                } else {
                    validationSummary.html("<div class='k-messagebox k-messagebox-error'>Oops! There is invalid data in the form.</div>");
                }
            });
        });
    </script>
</body>
</html>

If there are other components used on the validator page, they should be included in the custom script as well to work without errors.

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources! 
Create an account Log In
View
Type
Status
Category