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

Question

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.

Martin · Accepted Answer · 2010-10-25 13:11:35Z

1

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.

edited Oct 25, 2010 at 13:11

Martin

11.1k8 gold badges53 silver badges77 bronze badges

answered Oct 25, 2010 at 11:08

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rakesh Over a year ago

i have removed the onclick event on input type="image" and modified my javascript as per ur code ... but it seems that even though the validation is false the server side event is still being called ?

Darin Dimitrov Over a year ago

Maybe there's some javascript error which prevents the script from running correctly? What does FireBug say?

Rakesh Over a year ago

i have added this in the form tag using (Html.BeginForm("SaveBulletin", "FacilityBulletin", FormMethod.Post, new { @class = "hiajax",area="FacilityBulletin" })) and also in the input image i have removed the onclick attribute... and here is teh javascript $(function () { $('form.hiajax').submit(function () {tinyMCE.triggerSave(); $.ajax({ type: this.method, url: this.action, data: $(this).serialize(), success: function (data) { alert(data); } }); return false; }); });

Rakesh Over a year ago

no error at all.. the server side function gets executed and the alert box is displayed ..i m displaying an alert on success

Rakesh Over a year ago

i m using MicrosoftMvcJQueryValidation

Sam · Accepted Answer · 2010-10-25 11:05:44Z

0

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
    }
}

answered Oct 25, 2010 at 11:05

Sam

1,5142 gold badges14 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related