CODEWITHSUNDEEP
asp.netjqueryasp.net-mvcclient-side-validation
Rakesh
Rakesh

Reputation: 153

Prevent jQuery server-side call when client side validation fails in ASP.NET MVC

I have a view page with model validations and client side validation enabled. I have a submit button which on click I have called a javascript function which uses jQuery for an AJAX call to the server..but I want to stop the AJAX action when client side validations fails. Any idea how to?

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("", "", FormMethod.Post, new { @class = "hiajax" }))
   {%>
<%= Html.ValidationSummary(true) %>
<div class="formRow">
<%if(Model.ListFacility.Count !=0){ %>
    <%= Html.LabelFor(model => model.ListFacility)%><span class="err">*</span><br />
    <%= Html.DropDownListFor(model => model.ListFacility, (SelectList)ViewData["FacilityBulletin"], new {onChange="updateSiteId()" })%>
   <span class="err"> <%= Html.ValidationMessageFor(model => model.ListFacility) %></span>
    <div class="clear">
</div>
<%} %>
<div class="formRow">
    <%= Html.LabelFor(model => model.FacilityBulletin) %><span class="err">*</span><br />
    <%= Html.TextAreaFor(model => model.FacilityBulletin,  new { @class = "tinymce" })%>
   <span class="err">   <%= Html.ValidationMessageFor(model => model.FacilityBulletin) %></span>
    <div class="clear" />
</div>
<div class="formRow">

        <%=Html.CheckBoxFor(model=>model.Active, new { style = "float: left; margin-right: 10px;" })%>
    <span style="float: left; padding-top: 1px;">Active</span>
    <%=Html.HiddenFor(model=>model.SiteId) %>
</div>
<div class="formRow">       
    <input type="image" name="Save" src='<% =Url.Content("~/images/btn_save.png") %>'  onclick="SaveBulletin();" />
</div>
<% } %>
</div>

Here is my JavaScript:

function SaveBulletin() {
    tinyMCE.triggerSave();
    $.ajax({
        type: 'POST',
        url: "FacilityBulletin/FacilityBulletin/SaveBulletin",
        data: $("form.hiajax").serialize(),
        success: function (data) { alert(data); }
    });
}

Please help.

Upvotes: 2

Views: 2304

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038790

Instead of having an onclick attribute on your your image submit button use the .submit() action of the form:

$(function() {
    $('form.hiajax').submit(function() {
        tinyMCE.triggerSave();
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (data) { alert(data); }
        });        
        return false;
    });
});

Also notice how the url is no longer hardcoded in javascript but read from the action attribute of the form. Of course you need to fix your Html.BeginForm as well in order to supply the proper controller and action the form has to be sent to.

Upvotes: 1

Sam
Sam

Reputation: 1514

While not specifically geared towards MVC, you can manually call and check client-side validation though javascript, as follows:

function SaveBulletin() 
{
    Page_ClientValidate();

    if (Page_IsValid) 
    {
            // do Ajax call
    }
}

Upvotes: 0

Related Questions