2010-04-01 83 views
0

我有2个textboxs,2个checkboxs和2个标签。asp.net与jQuery验证问题

第一个文本框,复选框,和标签相互关联和相同的休息。

文本应该接受基于jQuery验证插件当chackbox检查验证规则会改变,并在这两个选项的错误信息有效的电话号码会DISPLY标签内。

我没有问题,以实现对于一个文本框,但是当我添加第二个将有一个问题,只有验证将发生的只有第二个。

请看看我的代码和建议。

<script src="js/jquery-1.4.1.js" type="text/javascript"></script> 

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




<script type="text/javascript"> 
     var RegularExpression; 
     var USAPhone = /^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$/; 
     var InterPhone = /^\d{9,12}$/; 
     var errmsg; 


     function ValidPhoneHome(sender) { 


      if (sender.checked == true) { 
       RegularExpression = InterPhone; 
       errmsg = "Enter 9 to 12 numbers as international number"; 

      } 
      else { 

       RegularExpression = USAPhone; 
       errmsg = "Enter a valid number"; 

      } 


      jQuery.validator.addMethod("phonehome", function(value, element) { 
       return this.optional(element) || RegularExpression.test(value); 
      }, errmsg); 
     } 


     function ValidMobileHome(sender) { 


      if (sender.checked == true) { 
       RegularExpression = InterPhone; 
       errmsg = "Enter 9 to 12 numbers as international number"; 

      } 
      else { 

       RegularExpression = USAPhone; 
       errmsg = "Enter a valid number"; 

      } 


      jQuery.validator.addMethod("mobilephone", function(value, element) { 
       return this.optional(element) || RegularExpression.test(value); 
      }, errmsg); 
     } 


$(document).ready(function() { 

     ValidPhoneHome("#<%= chkIntphoneHome%>"); 
     ValidMobileHome("#<%= chkIntMobileHome%>"); 


      $("#aspnetForm").validate({ 

       rules: { 
        "<%=txtHomePhone.UniqueID %>": { 

        phonehome: true 

        } 
       } 
       , errorLabelContainer: "#lblHomePhone", 


       rules: { 
        "<%=txtMobileHome.UniqueID %>": { 

        mobilephone: true 

        } 
       } 
       , errorLabelContainer: "#lblMobileHome" 
       }) 

</script> 

<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" onclick="ValidPhoneHome(this)" > 

<asp:TextBox ID="txtHomePhone" runat="server" ></asp:TextBox> 

<label id="lblHomePhone"></label> 


<asp:CheckBox ID="chkIntMobileHome" runat="server" Text="Internation Code" onclick="ValidMobileHome(this)" /> 

<asp:TextBox ID="txtMobileHome" runat="server"></asp:TextBox> 

<label id="lblMobileHome"></label> 

回答

0

这里是正确的代码:

<script src="js/jquery-1.4.1.js" type="text/javascript"></script> 

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


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

<script type="text/javascript"> 

    $(document).ready(function() { 

     ValidPhoneHome("#<%= chkIntphoneHome%>"); 
     ValidMobileHome("#<%= chkIntMobileHome%>"); 


     $("#aspnetForm").validate({ 

      rules: { 
       "<%=txtHomePhone.UniqueID %>": { 

        phonehome: true 
       }, 
       "<%=txtMobileHome.UniqueID %>": { 

        mobilephone: true 

       } 
      }, 




       errorElement: "mydiv", 
       wrapper: "mydiv", // a wrapper around the error message 

        errorPlacement: function(error, element) { 
        offset = element.offset(); 
        error.insertBefore(element) 
        error.addClass('message'); // add a class to the wrapper 
        error.css('position', 'absolute'); 
        error.css('left', offset.left + element.outerWidth()); 
        error.css('top', offset.top - (element.height()/2)); 

       } 



     }); 
    }); 

</script> 

    <div id="mydiv"> 


       <asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" Style="position: absolute; 
        top: 113px; left: 549px;" onclick="ValidPhoneHome(this)" 
        /> 

       <asp:TextBox ID="txtHomePhone" runat="server" Style="top: 147px; left: 543px; position: absolute; 
        height: 22px; width: 128px" ></asp:TextBox> 

        <cc1:FilteredTextBoxExtender ID="txtHomePhone_FTBE" runat="server" 
        Enabled="True" FilterType="Numbers" TargetControlID="txtHomePhone"> 
       </cc1:FilteredTextBoxExtender> 

        <label id="lblHomePhone" 
        style="position:absolute; top: 175px; left: 451px; width: 351px;"></label> 


       <asp:CheckBox ID="chkIntMobileHome" runat="server" Style="position: absolute; top: 200px; 
        left: 535px;" Text="Internation Code" onclick="ValidMobileHome(this)" /> 
       <asp:TextBox ID="txtMobileHome" runat="server" Style="top: 231px; left: 555px; position: absolute; 
        height: 22px; width: 128px"></asp:TextBox> 
        <cc1:FilteredTextBoxExtender ID="txtMobileHome_FilteredTextBoxExtender" 
        runat="server" Enabled="True" FilterType="Numbers" 
        TargetControlID="txtMobileHome"> 
       </cc1:FilteredTextBoxExtender> 
        <label id="lblMobileHome" style="top: 254px; left: 449px; position: absolute; 
        height: 17px; width: 345px"></label> 


        <asp:CheckBox ID="chkIntFaxHome" runat="server" Style="position: absolute; top: 274px; 
        left: 567px;" Text="Internation Code" onclick="ValidFaxHome(this)" 
        /> 
       <asp:TextBox ID="txtFaxHome" runat="server" Style="top: 294px; left: 569px; position: absolute; 
        height: 22px; width: 128px"></asp:TextBox> 
        <label id="lblFaxHome" style="top: 321px; left: 483px; position: absolute; 
        height: 22px; width: 294px"></label> 


       <cc1:FilteredTextBoxExtender ID="txtFaxHome_FilteredTextBoxExtender" 
        runat="server" Enabled="True" FilterType="Numbers" TargetControlID="txtFaxHome"> 
       </cc1:FilteredTextBoxExtender> 


       </div>