jquery客戶端驗證

我想驗證我的.aspx表單使用jQuery驗證插件。我已經編寫了用於驗證的函數和用於顯示錯誤消息的檢查和消息規則。jquery客戶端驗證

但即使添加了所有必要的插件和函數調用之後，我的表單仍未得到驗證。

任何人都可以請指導我，如果我錯了某處。

我附加下面的.aspx代碼。

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-2.1.4.js"></script> 
    <script src="Scripts/jquery.validate.js"></script> 
    <script src="Scripts/jquery.validate.min.js"></script> 
    <script src="Scripts/bootstrap.js"></script> 
    <script src="Scripts/bootstrap.min.js"></script> 
    <script> 

      //$(function() { 
     $(document).ready(function() { 
       debugger; 
       $("#form1").validate({ 


        rules: { 
         lblName: "required", 
         lblCity: "required", 
         lblDepName: "required", 
         lblSalary: { 
          required: true, 
          number: true 
         }, 

        }, 

        // Specify the validation error messages 
        messages: { 
         lblName: "Please enter your Name", 
         lblCity: "Please enter your City", 
         lblDepName: "Please select a department Name from the dropdown list", 
         lblSalary: { 
          required: "Please enter the Salary", 
          number: "Only Numbers are allowed" 
         } 
        }, 

        submitHandler: function (form) { 
         form.submit(); 
        } 
       }); 
       $('#btnInsertEmployee').click(function() { 
        debugger; 
        if ($("#form1").validate()) { 

        } 
       }); 
      //}); 
     }); 


    </script> 
    <style type="text/css"> 
     .auto-style1 { 
      width: 100%; 
     } 
     .auto-style2 { 
     } 
     .auto-style3 { 
      width: 146px; 
      height: 26px; 
     } 
     .auto-style4 { 
      height: 26px; 
     } 
    </style> 

</head> 
<body> 
    <form id="form1" runat="server"> 
<br /> 
       <br /> 
       <br /> 
       <br /> 
       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
       <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
        <ContentTemplate> 

       <asp:GridView ID="GridView1" runat="server" OnRowEditing="GridView1_RowEditing"> 


       </asp:GridView> 
         </ContentTemplate> 
        </asp:UpdatePanel> 
       <br /> 
       <br /> 
&nbsp; 
       <table class="auto-style1"> 
        <tr> 
         <td class="auto-style3"> 
          <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> 
         </td> 
         <td class="auto-style4"> 
          <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtCity" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label> 
         </td> 
         <td> 
          <asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" OnSelectedIndexChanged="ddlDepName_SelectedIndexChanged" Width="122px"> 
          </asp:DropDownList> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" /> 
          &nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2" colspan="2"> 
          <asp:Label ID="lblMessage" runat="server"></asp:Label> 
         </td> 
        </tr> 
       </table> 
       <br /> 
       <br /> 
       <br /> 
       <br /> 
       <br /> 
       <br /> 
      </div> 
</form> 
</body> 
</html>

來源

2015-10-23 Mani Rajan

可能是您的腳本標記路徑尚未解析，嘗試用'〜/ Scripts /'替換'Scripts /'並再次運行。 – Prabhat

兩者都是相同的，您應該使用這裏的任何一個示例代碼：http：// jsfiddle.net/bipen/ZrfhU/ –

謝謝。但仍然有一些錯誤。 –

相反lblName或lblCity的，應該改爲txtName或txtCity。

rules: { 
      txtName: "required", 
      txtCity: "required", 
     }, 

     // Specify the validation error messages 
     messages: { 
      txtName: "Please enter your Name", 
      txtCity: "Please enter your City", 
     },

來源

2015-10-23 07:21:08

jquery客戶端驗證

回答

相關問題