CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazorrazor-pages
Biraz Dahal
Biraz Dahal

Reputation: 391

How to use validation for other button except than submit in cshtml?

I have written a html code for cshtml which consists two button save and update:

 <div class="modal-body">
                    @using (Html.BeginForm("Create", "CustomActivity", FormMethod.Post, new { role = "form", @id = "customActivityForm", @class = "activityForm" }))
                    {
                        <div>
                            <div class="container" id="activity">
                                @Html.LabelFor(m => m.AdminCustomActivity.Activity, new { @class = "" })
                                @Html.TextBoxFor(m => m.AdminCustomActivity.Activity, new { @class = "w100p mb0" })
                                @Html.ValidationMessageFor(m => m.AdminCustomActivity.Activity, "", new { @class = "text-danger" })
                            </div>

                            <div class="container">
                                <div class="column one-fourth">
                                    <div>
                                        @Html.LabelFor(m => m.AdminCustomActivity.Rate, new { @class = "wcrate" })
                                        @Html.TextBoxFor(m => m.AdminCustomActivity.Rate, new { @class = "w100p mb0" })
                                        @Html.ValidationMessageFor(m => m.AdminCustomActivity.Rate, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                            </div>

                            <div class="modal-footer">
                                @Html.HiddenFor(m => m.AdminCustomActivity.WorkOrderId, new { @id = "hfWorkOrderId" })
                                @Html.HiddenFor(m => m.AdminCustomActivity.Id, new { @id = "customActivityId" })
                                <button type="submit" class="btn btn-primary">Create</button>
                                <button class="btn btn-primary" id="updateActivity">Update</button>
                            </div>
                        </div>

                    }
                </div>

Now in the footer there is two button add and update the validation works perfect for add button but the validation dosen't works for Update button since the function call of update button is from jquery

 $("#updateActivity").click(function () {
                    event.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: "/CustomActivity/Update",
                        data: {
                            WorkOrderId: @Model.Id,
                        },
                        success: function () {
                            location.reload();
                            window.scrollTo(0, 0);
                        },
                        error: function () {
                            //alert(erro.data)
                        }
                    });
                })

How can I allow to check validation in update button same as add bututon. I tried using type='submit' but that doesn't works

Upvotes: 1

Views: 71

Answers (1)

Jaggan_j
Jaggan_j

Reputation: 518

You would have to call a function which implements the jQuery validatation to show validation messages at the Update button click:

function validateUpdate() {      
  $("#customActivityForm").validate({
    rules: {
        AdminCustomActivity_Activity: "required",
        AdminCustomActivity_Rate: "required"
     }
  });
}

$("#updateActivity").click(function () {
      validateUpdate();
      $.ajax({
          type: "POST",
          url: "/CustomActivity/Update",
          data: {
              WorkOrderId: @Model.Id,
             },
          success: function () {
            location.reload();
            window.scrollTo(0, 0);
          },
          error: function () {
             //alert(erro.data)
          }
     });
})

Upvotes: 1

Related Questions