[SOLVED] Problem with bassistance jquery validation plugin, form submits when invalid

Problem with bassistance jquery validation plugin, form submits when invalid

I can't seem to find anything that comments on the behaviour I am having when trying to use the bassistance jquery validation plugin.

I am working in VB.net (I know, I know)

Anyway, I have several nested master pages with a user control which is my form.

The problem is, the validation works, I get a message saying first name is required, but the form then submits anyway. Has anyone else come across this?? and does anyone have a solution for it?

The usercontrol declaration is as follows:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CampaignForm.ascx.vb" Inherits="CampaignForm" %>

The script for the rules of the plugin

<script type="text/javascript">
    // only for test purposes
    $.validator.setDefaults({
        submitHandler: function () {
            alert("submitted!");
        }
    });

    $(document).ready(function () {
        $("#form1").validate({
            rules:{ 
            <%=tbFirstName.UniqueID %>: {
                required:true,
                minlength:2
                }
            }, messages:{}
        });
    });
</script>

Then the input for the rule

<asp:TextBox class="Wider" ID="tbFirstName" ClientIDMode="Static" runat="server"></asp:TextBox> 
<label for="tbFirstName" class="error">First name is required and must be longer than 2 characters</label>

The button for submitting:

<asp:Button Width="248" Height="68" ID="btnSubmit" CssClass="btnCompareNow" runat="server" />

And finally the method that handles the button submit:

Private Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click

    If Page.IsValid Then
    End If

End Sub

Solution

i may b wrong but i think its because you are using the server side control button which will post the data anyway...

Edit1

call the function on button submit like onClick="validate(this);"

<script>
function validate(e){
e.preventDefault();
}


</script>

Edit2

$(document).ready(function(){

$('#btnSubmit').click(function(e) {
        e.preventDefault();
    });
});