Post
Ask Question
Ramprasad

Ramprasad

  • NA
  • 26
  • 11.2k

Client side form validation not working jquery...

Jan 1 2018 12:47 PM
<%--This is my form i have done form validation using jquery but one problem is all fields are filled and after that
first,second...(any),and third field are delete (empty textbox) and this form submited without validate why please help
me this case--%>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="WebApplication4.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!--Jquery Validaton Plugin-->
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<!--Jquery Validaton Plugin End-->
<title></title>
<style type="text/css">
label.error {
color: red;
display: block;
margin-left: 40px;
}
</style>
<script>
$(document).ready(function() {
$.validator.addMethod("match", function(value, element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");
//custom validation rule for Dropdown List
$.validator.addMethod("CheckDropDownList", function (value, element, param) {
if (value == '0')
return false;
else
return true;
},"Please select a Department.");
$("#form1").validate({
rules: {
//
<%=name.UniqueID %>:{
required:true,
minlength: 10,
},
<%=email.UniqueID %>: {
required: true,
//email:true,
match:true,
},
<%=field.UniqueID %>: {
required: true,
digits:true,
},
<%=ddlDept.UniqueID %>:{
CheckDropDownList:true,
},
<%=txtMobNo.UniqueID %>: {
required: true,
digits:true,
minlength: 10,
pattern: [/^[7-9]{1}[0-9]{9}$/],
},
},
messages: {
<%=name.UniqueID %>:{
required: " Required Field *",
minlength: "Minimum length 10 digit",
},
<%=email.UniqueID %>: {
required: "Email id is required",
//email: "This is not correct Email Id",
},
<%=txtMobNo.UniqueID %>: {
required: "Enter Mob No",
minlength: "Mobile No should be 10 digit",
},
},
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<span>First Name</span>
<asp:TextBox ID="name" runat="server" CssClass="required"></asp:TextBox>
</div>
<div>
<span>E-Mail ID</span>
<asp:TextBox ID="email" runat="server" CssClass="required"></asp:TextBox>
</div>
<div>
<span>Mobile Number</span>
<asp:TextBox ID="field" runat="server" MaxLength="10" CssClass="required"></asp:TextBox>
</div>
Department
<asp:DropDownList ID="ddlDept" runat="server" CssClass="form-control required">
<asp:ListItem Value="0">-- Department --</asp:ListItem>
<asp:ListItem Value="1">City</asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="txtMobNo" runat="server" CssClass="form-control required"></asp:TextBox>
<div>
<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

Answers (2)