Как проверить ввод, в неформальном элементе, по keyup с помощью плагина jQuery validate

Question

У меня есть сайт, который создается в ASPX. К сожалению, из-за этого факта я не могу использовать тег <form>, чтобы обернуть свои входные данные, и, насколько я вижу, плагин проверки jQuery поддерживает только проверку входных данных в пределах <form>. Есть ли способ проверить эти входные данные, используя указанные правила, на keyup, не заключая их в тег <form>?

$(function() {
  $('.form-container').validate({
    rules: {
      useremail: {
        required: true,
        email: true
      },
      userstate: {
        required: true,
        maxlength: 2
      }
    },
    messages: {
      useremail: 'Please enter a valid email',
      userstate: 'Please enter your state',
    }
  });
  
  $('.form-container input').on('keyup', function() {
    $(this).validate();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>

<div class="form-container">
  <input type="text" name="useremail" placeholder="Email" />
  <input type="text" name="userstate" placeholder="State" maxlength="2" />
</div>

Answer 1

Вы не можете иметь вложенные формы, которые являются недействительными HTML, и вы должны прикрепить .validate() к form контейнеру. Обходных путей нет.

Вы также используете .validate() все неправильно. Поскольку это основной метод инициализации плагина, его перенос в обработчик keyup некорректен. Плюс плагин уже использует событие keyup для запуска проверки.

И нет, вы не можете поместить элементы ввода формы в div, а затем нацелиться на то, что div присоединено к .validate(). Это будет проигнорировано. Вы можете выбрать только элементы form, прикрепленные к .validate().

Более того, поскольку вы используете ASP, вы можете использовать его встроенный плагин Unobtrusive Validation, который автоматически создает и вызывает метод .validate() на основе ваших атрибутов данных. Просто помните, что если вы пойдете по этому маршруту, вы не сможете позвонить .validate() самостоятельно. Плагин допускает только один вызов, и после инициализации все последующие вызовы .validate() игнорируются.