1.10.4.Implementing Client-side Validation

• 1.Add @Scripts.Render("~/bundles/jqueryval") to New.cshtml

• 2.Customerize validator

• 3.Move submit function in $("#newRental").validate({ submitHandler: function () {}});

@section Scripts
{
 @Scripts.Render("~/bundles/jqueryval");
 <script>
  $(document).ready(function () {


   $.validator.addMethod("validationCustomer", function () {
    return vm.customerId && vm.customerId !== 0;
   }, "Please select a valid customer");

   $("#newRental").validate({
    submitHandler: function () {
     $.ajax({
      url: "/api/newRental",
      method: "post",
      data: vm
     })
      .done(function () {
       toastr.success("Rental successfully recorded");
      })
      .fail(function () {
       toastr.error("Something unexpected happened");
      });
    }

• 4.Modify input property

    <input id ="customer" name ="customer" data-rule-validationCustomer= "true" required type = "text" value="" class="form-control">

• 5.Clear input and viewModel after submitting

    var validator = $("#newRental").validate({
    submitHandler: function () {
     $.ajax({
      url: "/api/newRental",
      method: "post",
      data: vm
     })
      .done(function () {
       toastr.success("Rental successfully recorded");
       $('#customer').typeahead("val", "")
       $('#movie').typeahead("val", "")
       $('#movie').empty()
  
       vm = { movieIdsP: [] };
       validator.resetForm();
      })
      .fail(function () {
       toastr.error("Something unexpected happened");
      });
  
     return false;
    }