Making an Image Button Validate
I'm just starting out with jQuery and am modifying my customer form to use the validation plugin. Everything was working fine till I changed my button back to an image. Now it wont validate and just proceeds to the next page. I'm using a container to display my error messages but im leaving that in to show whats going on. In one case it works and in the other it doesnt. There's something in the validate that stops it from working.
Here is my code snippet that doesnt validate the form and passes through:
<script>
$().ready(function() {
var container = $('div.container');
var validator = $("#CustForm").validate({
errorContainer: container,
wrapper: 'div',
meta: "validate",
rules: {
credit_card: {
required: function(element) {
return $("#payment_type").val() == 'credit'
}
}
card_month: {
required: function(element) {
return $("#payment_type").val() == 'credit'
}
}
card_year: {
required: function(element) {
return $("#payment_type").val() == 'credit'
}
}
card_number_ccard: {
required: function(element) {
return $("#payment_type").val() == 'credit'
}
}
}
});
$("#nextbutton").click(function() {
alert('im here');
});
});
</script>
<cfform action="#myself##xfa.next#" method="post" id="CustForm" name="CustForm">
...
<cfinput type="image" src="#session.templatePath#/nextstep.gif" value="submit" name="nextButton" id="nextButton" border=0 class="submit">
</cfform>
Here is the code that does work and validates the form:
<script>
$().ready(function() {
var container = $('div.container');
var validator = $("#CustForm").validate();
$("#nextbutton").click(function() {
alert('im here');
});
});
</script>
<cfform action="#myself##xfa.next#" method="post" id="CustForm" name="CustForm">
...
<cfinput type="image" src="#session.templatePath#/nextstep.gif" value="submit" name="nextButton" id="nextButton" border=0 class="submit">
</cfform>
I'd really appreciate the help.