Проверка JQuery не работает на странице содержимого ASP.net

Question

У меня есть два текстовых поля для пароля и подтверждения пароля. Но проверка с использованием плагина Jquery validation не работает. Мои элементы управления находятся на странице содержимого.

 <asp:textbox TextMode="Password" runat="server" ID="txtPassword" required="True"  class="form-control"></asp:textbox>


 <asp:textbox TextMode="Password" runat="server" ID="txtConfPassword" required="True" equalto= "ContentPlaceHolder1_txtPassword"  class="form-control"></asp:textbox>

Я даже пытался

equalto='<%=txtPassword.UniqueID %>' and equalto='<%=txtPassword.ClientID %>'

, но это не работает. Мой сценарий находится на главной странице следующим образом

function setFormValidation(id) {
          $(id).validate({
              highlight: function (element) {
                  $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                  $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
              },
              success: function (element) {
                  $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                  $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
              },
              errorPlacement: function (error, element) {
                  $(element).closest('.form-group').append(error);
              },
          });
      } 

    $(document).ready(function() {
          setFormValidation('#form1');
});

Все остальные проверки работают нормально. Я понимаю, что ошибка возникает при изменении идентификатора текстового поля на странице содержимого.

, пожалуйста, помогите.

edit 1

Я попытался добавить следующий скрипт на главной странице.

$(id).validate({
                  rules: {
                      '<%= this.ContentPlaceHolder1.FindControl("txtPassword").UniqueID %>': {
                          required: true,
                          rangelength: [6, 15]
                      },
                      '<%= this.ContentPlaceHolder1.FindControl("txtConfPassword").UniqueID %>': {
                          required: true,
                          equalTo: '#<%= this.ContentPlaceHolder1.FindControl("txtPassword").ClientID %>'
                      }
                  },
                  messages: {

                      '<%= this.ContentPlaceHolder1.FindControl("txtPassword").UniqueID %>': {
                          required: "This field is required.",
                          rangelength: "Minimum 6 characters required"
                      },

                      '<%= this.ContentPlaceHolder1.FindControl("txtConfPassword").UniqueID %>': {

                          equalTo: "Please enter the same password again"
                      }
                  },
                  highlight: function (element) {
                      $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
                      $(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
                  },
                  success: function (element) {
                      $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
                      $(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
                  },
                  errorPlacement: function (error, element) {
                      $(element).closest('.form-group').append(error);
                  },
              })

Работает нормально для конкретной страницы (скажем, user.aspx). но когда я перейду на любую другую страницу, она выдаст ошибку. Ссылка на объект не установлена ​​на экземпляр объекта. на '<%= this.ContentPlaceHolder1.FindControl("txtPassword").UniqueID %>':, потому что этот элемент управления не будет присутствовать на странице содержимого

Я пытался поставить условие if else на главной странице как

if (window.location.pathname == "/admin/AddUser.aspx") {

, но оно все равно выдает ошибку

Answer 1

Попробуйте equalTo = " # txtPassword "

<asp:TextBox TextMode="Password" runat="server" ID="txtPassword" required="True"  class="form-control"></asp:TextBox>
<asp:TextBox TextMode="Password" runat="server" ID="txtConfPassword" required="True" equalTo="#txtPassword" class="form-control"></asp:TextBox>

Или в случае использования правил проверки

Разметка

<asp:TextBox TextMode="Password" runat="server" ID="txtPassword" class="form-control"></asp:TextBox>
<asp:TextBox TextMode="Password" runat="server" ID="txtConfPassword" class="form-control"></asp:TextBox>

JavaScript

<script>
    function setFormValidation(id) {
        $(id).validate({
            rules: {
                txtPassword: {
                    required: true
                },
                txtConfPassword: {
                    required: true,
                    equalTo: '#txtPassword' // '#<%= txtPassword.ClientID %>' // this would work too
                }
            }
        });
    }

    $(document).ready(function () {
        setFormValidation('#form1');
    });
</script>

Для получения дополнительной информации о проверке проверки Плагин проверки jQuery

Обновление

IВы только что поняли, что на странице Master / Content немного отличается, ваш код верен, добавьте знак решетки к идентификатору, определенному в EqualTo:

<asp:TextBox TextMode="Password" runat="server" ID="txtConfPassword" required="True" equalto="#ContentPlaceHolder1_txtPassword" class="form-control">