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