asp.netjqueryvb.netjquery-validate

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();
        });
    });