asp.net with jquery valduation issue

Question

Greetings, I have 2 textboxs, 2 checkboxs and 2 labels.

first textbox, checkbox, and label related to each other and the same for the rest.

textbox should accept valid phone number based on jquery validation plugin and when the chackbox check the validation rule would change and in both option the error message would disply inside the label.

I have no problem to implement that for one text box but when I add second one will have a problem and only the validation will happen for the second one only.

please look at my code and advice.

 <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>

Answer 1

here is the correct code:

<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>