Validator with no formal form

[Joe]

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?

[Tsvetina]

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

[Joe]

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.

[Tsvetina]

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