xVal and jQuery Submit Button

Question

I have a simple form. Its got one field and a submit button. I hide the submit button. The submit button is actually triggered with an anchor tag that calls a javascript method that uses jQuery to get the element and execute a click(). This works fine, the form posts and record is successfully written into the DB.

So now I added xVal for validation. I am trying to add in the simple client side validation.

It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.

Any grande ideas? Thanks much!

Heres some code...

<div id="manufacturerButtons" class="moduleRow">
            <%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
            | <a class="actionImage" href="javascript: addManufacturer();">
                <img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>">&nbsp;<span>Add
                    Manufacturer </span></a>
        </div>
        <div class="moduleContent">
            <div id="manufacturerContainer">
                <div class="moduleRow">
                    <h3>
                        New Manufacturer</h3>
                </div>
                <div class="moduleRow">
                    <% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
                    <table class="noBorder" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="width: 125px">
                               <h6>Name:</h6>
                            </td>
                            <td>
                                <%= Html.TextBox("Name") %>
                            </td>
                        </tr>
                        <tr style="display: none;">
                            <td>
                                &nbsp;
                            </td>
                            <td>
                                <input type="submit" id="btnAdd" name="btnAdd" />
                            </td>
                        </tr>
                    </table>
                    <% Html.EndForm(); %>
                    <%= Html.ClientSideValidation<EquipmentManufacturer>() %>
                </div>

            </div>

Javascript:

function addManufacturer() {
    //$('form').submit(); // doesnt work when trying to validate either
    $('#btnAdd').click();
    return true;
}

Answer 1

What you need to do is trigger the jQuery validation on your form. Try:

$('form').validate();

To submit the form upon successful validation, try:

$('form').validate({ submitHandler: function(form) { form.submit(); } });

Note that 'form' should be a valid jQuery selector for your form...