Плагин jQuery Validate не работает должным образом

Question

Я пытаюсь настроить проверку страницы входа в систему и не могу установить сообщения вручную.Тест ниже:

$("#botonEnviar").click(function() {
  //alert("Button push works");
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="submit" class="btn green pull-right">Acceder </button>
  </div>
</form>

При активации (нажатие) кнопки я не получаю никаких ошибок (только предупреждение, когда я его раскомментирую), но когда я устанавливаю class = ", требуется"или атрибут обязателен, я получаю сообщение об ошибке" Это поле обязательно для заполнения. "который отображается даже после того, как я удаляю весь скрипт.Я хочу изменить это значение по умолчанию.Другими словами, я хочу иметь возможность отображать свои собственные сообщения («El campo DNI no puede estar vacío» или «El campo contraseña no puede estar vacío»).Я читал документы и похожие вопросы (их много, я знаю), но я не получил результатов с предоставленными решениями, поэтому я надеюсь, что вы можете мне как-нибудь помочь.Спасибо

Дополнительно, в случае, если это поможет

alert($("#loginform").validate().form());

возвращает значение true даже после того, как я щелкну по нему с пустыми полями.

Редактировать: форма работает правильно независимо от проверки JavaScriptсам.Он регистрирует, когда данные верны, и обновляет страницу, когда логин не работает.Так что никаких проблем с этим

EDIT2: Сначала я использовал:

<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>

после того, как я изменил их на те, которые отредактированы, работало отлично.

EDIT3: я провел некоторые исследования импорта моего проекта, когда заметил, что это проблема с заказом.Библиотека Jquery была первой, прямо перед библиотекой начальной загрузки.Перевернул их, снова работал со старыми библиотеками.Я не достиг бы этого без вашей помощи, еще раз спасибо!

Answer 1

Ваш код в коде исправен, проблема может быть в среде разработки, другая ошибка может препятствовать запуску кода?

Также вам не нужно ничего делать, нажимая кнопкуКнопка, потому что уже есть событие «Отправить», инициируемое кнопкой type="submit", и плагин автоматически проверит правильность вашей формы.

Если вам нужно что-то сделать с помощью кнопки, вам нужно будетудалите тип отправки и при нажатии проверьте правильность формы, как показано ниже:

$(function() {
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
  
  $("#botonEnviar").click(function () {
   if( $("#loginform").valid() ) {
    alert('seems ok!!');
   }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="button" class="btn green pull-right">Acceder </button>
  </div>
</form>