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.

Answer 1

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

Answer 2

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.