Create a Custom Validation Summary

Environment

Product

Progress® Kendo UI® Validator for jQuery

Description

This sample demonstrates how you can display the Validation errors in your custom HTML format.

Solution

    <div id="example">
      <div class="demo-section k-content">

        <form id="projectInputForm" class="k-form k-form-vertical">
          <ul class="k-form-group">
            <li class="k-form-field">
              <label for="fullname" class="k-form-label">Your Name</label>
              <span class="k-form-field-wrap">
                <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" />
              </span>
            </li>
            <li class="k-form-field">
              <label for="search" class="k-form-label">Movie</label>
              <span class="k-form-field-wrap">
                <input type="search" id="search" name="search" required validationMessage="Select movie" />
                <span class="k-invalid-msg" data-for="search"></span>
              </span>
            </li>
            <li class="k-form-field">
              <label for="date" class="k-form-label">Date</label>
              <span class="k-form-field-wrap">
                <input type="text" id="date" name="date"
                       min="5/6/2017" data-max-msg="Enter date after '5/6/2017''"
                       pattern="\d+\/\d+\/\d+" validationMessage="Enter full date" />
                <span class="k-invalid-msg" data-for="date"></span>
              </span>
            </li>
            <li class="k-form-field">
              <label for="time" class="k-form-label">Start time</label>
              <span class="k-form-field-wrap">
                <select name="time" id="time" required data-required-msg="Select start time">
                  <option>14:00</option>
                  <option>15:30</option>
                  <option>17:00</option>
                  <option>20:15</option>
                </select>
                <span class="k-invalid-msg" data-for="time"></span>
              </span>
            </li>
            <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-field">
              <label for="email" class="k-form-label">Email</label>
              <span class="k-form-field-wrap">
                <input type="email" id="email" name="email" class="k-textbox" placeholder="e.g. [e-mail]"  required data-email-msg="Email format is not valid" />
              </span>
            </li>
            <li class="k-form-field">
              <label for="tel" class="k-form-label">Phone</label>
              <span class="k-form-field-wrap">
                <input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
                       validationMessage="Enter at least ten digits" />
              </span>
            </li>
            <li class="k-form-field">
              <label for="rating" class="k-form-label">Rating</label>
              <span class="k-form-field-wrap">
                <input id="rating" name="rating" required validationMessage="Select a rating" />
                <span class="k-invalid-msg" data-for="rating"></span>
              </span>
            </li>
            <li class="k-form-field">
              <span class="k-form-label">Terms of Service</span>
              <span class="k-form-field-wrap">
                <label>
                  <input type="checkbox" name="Accept" required validationMessage="Acceptance is required" />
                  I accept the terms of service.
                </label>
              </span>
            </li>
            <li class="k-form-buttons">
              <button class="k-button k-primary" onclick='buttonClick();'>Submit</button>
            </li>
          </ul>
        </form>

        <div id="validation-summary">
        </div>
      </div>
    </div>


    <style>
    </style>

    <script>
      $(document).ready(function() {
        var data = [
          "12 Angry Men",
          "Il buono, il brutto, il cattivo.",
          "Inception",
          "One Flew Over the Cuckoo's Nest",
          "Pulp Fiction",
          "Schindler's List",
          "The Dark Knight",
          "The Godfather",
          "The Godfather: Part II",
          "The Shawshank Redemption"
        ];

        $("#search").kendoAutoComplete({
          dataSource: data,
          separator: ", "
        });

        $("#time").kendoDropDownList({
          optionLabel: "--Start time--"
        });

        $("#amount").kendoNumericTextBox();

        $("#date").kendoDateInput();

        $("#rating").kendoRating();
      });

      function buttonClick(){
        var validator = $("#projectInputForm").kendoValidator().data("kendoValidator");
        var StatusWindow = $("#validation-summary");


        if (validator.validate()) {
          // simulate ajax request and successfull result
          StatusWindow.html("<div class='k-messagebox k-messagebox-success'>Success</div>");
        } else {

          var errors = showErrors(validator._errors);
          StatusWindow.html(errors);
        }
      };

      function showErrors (errors) {
        var html = "<ul>";

        for(var error in errors){
          html += "<li>" + errors[error] + "</li>";
        }

        return html+"</ul>";
      }
    </script>