Validator with no formal form

4 posts, 0 answers
  1. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 16 Mar Link to this post

    I have a form that isn't inside of an HTML form tag, and upon a specific button click, I gather up the form data, bundle it up as a JSON object, send to an MVC controller and get the results back via Ajax. Can I still use the Telerik Validator component, and if so, how?  Are there any examples of using it via Ajax versus a form submission?
  2. Tsvetina
    Admin
    Tsvetina avatar
    2060 posts

    Posted 20 Mar Link to this post

    Hi Joe,

    You can manually trigger client-side validation with the Validator widget using its validate method, as shown in this demo:
    Validator / Basic usage
    The demo shows how to manually add the attributes needed for validation and then trigger the validation on button click. 

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 20 Mar in reply to Tsvetina Link to this post

    Even in the basic demo, the validator component was bound to a form. An actual HTML form tag.  Can I bind it to anything (div, span, etc...) or is the addition of an actual HTML form required?  All examples I've been able to find have the Kendo validator component as part of an actual HTML form.
  4. Tsvetina
    Admin
    Tsvetina avatar
    2060 posts

    Posted 22 Mar Link to this post

    Hi Joe,

    The sample is such because this is usually how you would submit data. However, if you look into the validation logic, you will see that it is fired manually after the actual submit is cancelled.

    The demo works just the same if you replace the form with a div container and the submit event with a button click one. You can try it for yourself in the local demos in your UI for ASP.NET MVC installation folder.

        <div id="ticketsForm">
            <ul id="fieldlist">
                <li>
                    <label for="fullname" class="required">Your Name</label>
                @(Html.Kendo().TextBox()
                          .Name("fullname")
                          .HtmlAttributes(new { placeholder = "Full name", required = "required", validationmessage = "Enter {0}", style = "width:220px" })
                    )
            </li>
            <li>
                <label for="time">Start time</label>
                @(Html.Kendo()
                          .DropDownList()
                          .Name("time")
                          .HtmlAttributes(new { required = "required", data_required_msg = "Select start time", style = "width: 220px" })
                          .BindTo(new[] {
                              new SelectListItem { Text="14:00" },
                              new SelectListItem { Text="15:30" },
                              new SelectListItem { Text="17:00" },
                              new SelectListItem { Text="20:15" }
                          })
                    )
                <span class="k-invalid-msg" data-for="time"></span>
            </li>
            <li>
                <label for="amount">Amount</label>
                @(Html.Kendo()
                          .NumericTextBox()
                          .Name("amount")
                          .Value(1)
                          .HtmlAttributes(new { max = "10", min = "1", required = "required", data_max_msg = "Enter value between 1 and 10", style = "width:220px" })
                    )
                <span class="k-invalid-msg" data-for="Amount"></span>
            </li>
            <li class="confirm">
                <button id="submit" class="k-button k-primary">Submit</button>
            </li>
            <li class="status">
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            var validator = $("#ticketsForm").kendoValidator().data("kendoValidator");
            var status = $(".status");
     
            $("#submit").click(function (event) {
                if (validator.validate()) {
                    status.text("Hooray! Your tickets has been booked!")
                        .removeClass("invalid")
                        .addClass("valid");
                } else {
                    status.text("Oops! There is invalid data in the form.")
                        .removeClass("valid")
                        .addClass("invalid");
                }
            });
        });
    </script>


    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top