jQuery Form Validation - Cross Browser Compatibility

So I have built this form validation using jQuery and it works perfectly in Chrome, and fails miserably in IE and FF. The page just continues to load upon submission in IE and FF.

I can't find a worthy explanation as to why, or how to fix it. Any suggestions would be much appreciated....

I'd also like to know how to validate the checkbox field using jQuery rules & messages, if this is possible. Cannot find any info on this in the jQuery documentation.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#successForm").validate({
    rules: {
        firstName: {
            required: true,
            minlength: 2,
        },
        lastName: {
            required: true,
            minlength: 2,
        },
        phoneNumber: {
            required: true,
            minlength: 10,
        },
        emailAddress: {
            required: true,
            email: true,
        },
        attachOne: {
            required: true,
            accept: "png|jpg|gif|jpeg|tif",
        },
        attachTwo: {
            required: true,
            accept: "png|jpg|gif|jpeg|tif",
        },
        termsAgree: {
            required: true,
            minlength: 1,
        },
    },
    messages: {
        firstName: {
            required: "Please enter your First Name.",
            minlength: jQuery.format("You need to use at least {0} characters for your first name."),
        },
        lastName: {
            required: "Please enter your Last Name.",
            minlength: jQuery.format("You need to use at least {0} characters for your last name"),
        },
        phoneNumber: {
            required: "Please enter your Phone Number.",
            minlength: jQuery.format("Please enter a valid phone number."),
    },
        emailAddress: {
            required: "Please enter your Email Address.",
            minlength: jQuery.format("Please enter a valid email address."),
        },
        dateOfBirth: {
            required: "Please enter your Date of Birth.",
            minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
    },
        termsAgree: "You must agree to the Terms and Conditions.",
    }
});
});
</script>

<style type="text/css">
input.error { border: 1px solid red; }
label.error {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>



<form action="<?=$_SERVER['PHP_SELF'];?>" enctype="multipart/form-data"  id="successForm"><table style="padding: 6px;">
<tr>
<td><label for="firstName">First Name</label></td>
<td><input type="text" id="firstName" name="firstName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($firstName));?>" /></td>
</tr>
<tr>
<td><label for="lastName">Last Name</label></td>
<td><input type="text" id="lastName" name="lastName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($lastName));?>" /></td>
</tr>
<tr>
<td><label for="phoneNumber">Phone Number</label></td>
<td><input type="text" id="phoneNumber" name="phoneNumber" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($phoneNumber));?>" /></td>
</tr>
<tr>
<td><label for="emailAddress">Email Address</label></td>
<td><input type="text" id="emailAddress" name="emailAddress" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($emailAddress));?>" /></td>
</tr>
<tr>
<td><label for="dateOfBirth">Date of Birth</label></td>
<td><input type="text" id="dateOfBirth" name="dateOfBirth" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($dateOfBirth));?>" /></td>
</tr>
<tr>
<td><label for="successStory">Your Success Story</label></td>
<td><textarea id="successStory" name="successStory" cols="50" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" style="margin-top:20px; margin-bottom: 5px; border: 1px solid #666; color:#666; width:300px;"><b>Please attach some photos of your success.</b><br /><span style="font-size:8pt;">Accepted File Types: jpg, jpeg, gif, png, tif<br />Maximum File Size: 2 megabytes</span>
<table style="border: 0px;">
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 1</label></td>
<td><input type="file" id="attach[0]" name="attachOne" /></td>
</tr>
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 2</label></td>
<td><input type="file" id="attach[1]" name="attachOne" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label for="termsConditions">Terms & Conditions</label></td>
<td><textarea id="termsConditions" name="termsConditions" cols="50" rows="6">Terms and Conditions...</textarea></td>
</tr>
<tr>
<td><la开发者_如何学编程bel for="termsAgree">&nbsp;</label></td>
<td><input type="checkbox" id="termsAgree" name="termsAgree" />I have read and agree to the Terms and Conditions.</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="Validate!" /><input type="reset" value="Reset!" /></td>
</tr>
</table>
</form>

Thanks for your help. Unfortunately though, that did not work. I might be misinterpreting your code, but here's what I've got.

<script type="text/javascript">

function validateForm() {
        if ($(".required").valid() == 0) {
            alert("failed!");
            return false;
        }
        else {
            alert("success!");
            return true;
        }
}

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});

    $(document).ready(function(){
        $("#successForm").validate({
            rules: {
                firstName: {
                    required: true,
                    minlength: 2,
                },
                lastName: {
                    required: true,
                    minlength: 2,
                },
                phoneNumber: {
                    required: true,
                    minlength: 10,
                },
                emailAddress: {
                    required: true,
                    email: true,
                },
                attachOne: {
                    required: true,
                    accept: "png|jpg|gif|jpeg|tif",
                },
                attachTwo: {
                    required: true,
                    accept: "png|jpg|gif|jpeg|tif",
                },
                termsAgree: {
                    required: true,
                    minlength: 1,
                },
            },
            messages: {
                firstName: {
                    required: "Please enter your First Name.",
                    minlength: jQuery.format("You need to use at least {0} characters for your first name."),
                },
                lastName: {
                    required: "Please enter your Last Name.",
                    minlength: jQuery.format("You need to use at least {0} characters for your last name"),
                },
                phoneNumber: {
                    required: "Please enter your Phone Number.",
                    minlength: jQuery.format("Please enter a valid phone number."),
                },
                emailAddress: {
                    required: "Please enter your Email Address.",
                    minlength: jQuery.format("Please enter a valid email address."),
                },
                dateOfBirth: {
                    required: "Please enter your Date of Birth.",
                    minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
                },
                termsAgree: "You must agree to the Terms and Conditions.",
            }
        });
    });
</script>

I don't appear to get an alert showing up in Chrome, FF or IE. I have tried onsubmit= from and onclick= from . Neither worked.

i had the same issue the other day

jQuery Validation always returns true

i solved by doing something like this;

function validateForm() {
        if ($(".required").valid() == 0)
            return false;
        else
            return true;
    }

I call validateForm from my submit button.

onclick="return validateForm()"