jquery validate and ajaxsubmit wont work together

Ranch Hand

Posts: 50

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

My jsp looks like this:

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<script src="${pageContext.request.contextPath}/jquery/jquery.js"></script>
<script src="${pageContext.request.contextPath}/jquery/jquery.form.min.js"></script>
<script src="${pageContext.request.contextPath}/jquery/jquery.validate.min.js"></script>

jQuery(document).ready(function () {

//......

....///

$("#submitId").click(function () {      
    //..

..//

}
};        
    // submit the form
$("#adjustmentsFormID").ajaxSubmit(options);
return false;
});

$("#apiID").validate({
rules: {
    pinNbr: "required",
    TranDt: "required"
},
messages: {
    pinNbr:"Please enter a Pin number.",
    TranDt: "Please enter tran date."
    }
});

$("#resetId").click(function () {
var validator = $('#apiID');
validator.resetForm();
});
});

</script>

<form:form id="apiID" action="executeApi.do" commandName="apiForm">

//..

<DIV class="label">Pin Number: </DIV><DIV class="nonLabel"><form:input path="pinNbr" maxlength="50" size="40" /></DIV>
<DIV class="label">Todays Transaction: </DIV><DIV class="nonLabel"><form:input path="TranDt" size="10" maxlength="10" />

..//

<DIV class="btn-group">
        <button id="submitId"  type="submit" class="default-button">Submit
        </button>
        <button id="resetId"  
            type="reset" class="default-button">Reset
        </button>
    </DIV>
</form:form>

Inside submit Id click i have a ajaxSubmit. Outside i have a validate(). My validate works fine with just jquery.validate.min.js import. But then when i included this ajaxSubmit in submit click function and imported jquery.form.min.js my validate() just wouldnt work and without the field validations my action gets submitted and returns exceptions since validations arent done. If i just remove the jquery.form.min.js validate() works just fine and shows ajaxSubmit is invalid and property doesnt exists. Now that I have included no debug error messages but validate() wouldnt work.

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You don't want to do things this way; it's not compatible with how HTML works. You should never put a click handler on a submit button!

Don't submit the form yourself. Use ajaxForm() to set up the form for Ajax submission, and then let HTML submit the form in its normal way.

To perform validation, use a summit handler on the form, not a click handler.

[Asking smart questions] [About Bear] [Books by Bear]