CODEWITHSUNDEEP
asp.netjquery-validatemaster-pages
Pankouri
Pankouri

Reputation: 676

My required field validation of jQuery is not working

I have aspx page where only one text box will be a required field. I am using JQuery to validate it.

My problem is the client side validation is not working.

The head section of my page is 

<script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>

<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>

<script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>

<script type="text/javascript">   
    $(document).ready(function(){
        checkRequiredInputs();

    }); 

</script>

The CandidateValidation.js file contains 

    function checkRequiredInputs(){
       $(".requiredField").validate({  
          rules:{  
                txtFName:{required: true}
           },
        messages:{  
             txtFName:"Name Required"
           }
      });
}

I have a CSS CLass lin my CSS File like 

.requiredField
{
}

The Text box where for this input is

I need a suggestion or solution from you programmers,the most helpful I have ever found, from this helpful sites, waiting for your reply. Thanx in advance

Upvotes: 0

Views: 823

Answers (1)

Răzvan Flavius Panda
Răzvan Flavius Panda

Reputation: 22116

For the code to work you will need to call validate() on the form containing your textbox.

For example:

[WebForm1.aspx]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Validation.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <link href="../Css/StyleSheet1.css" type="text/css" rel="Stylesheet" />
  <script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
  <script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        checkRequiredInputs();
    }); 
  </script>
  <title></title>
</head>
<body>
    <form id="form1" runat="server" clientidmode="Static" >
      <asp:TextBox runat="server" ID="txtFName" />
    </form>
</body>
</html>

[CandidateValidation.js]

function checkRequiredInputs(){
    $("#form1").validate({
        rules:{  
            txtFName:{required: true}
        },
        messages:{  
            txtFName:"Name Required"
        }
    });
}

Setting clientidmode="Static" on form1 will make it have same ID on client side so it can be referenced easily from jQuery.

If you press enter in txtFName TextBox to submit validation will be performed on the form:

Upvotes: 1

Related Questions