Загрузчик 3 валидатор - изменить форму пароля

У меня есть форма начальной загрузки 3, и я использую валидатор для проверки форм.

Я успешно реализовал базовые проверки для форм входа в систему, и теперь я внедряю проверку формы смены пароля.

Форма выглядит следующим образом:

<form id="changepassword-form" role="form" data-toggle="validator" class="form-quote" action="/changepasswordpost" method="POST">
  <input name="changepassword-id" type="hidden" value="{{ id }}"/>
  <input name="changepassword-token" type="hidden" value="{{ token }}"/>
  <div class="form-group row">
    <div class="form-field col-md-12 form-m-bttm">                                                                        
      <input name="changepassword-password" type="password" placeholder="Nueva contraseña *" class="form-control required">
    </div>
  </div>
  <div class="form-group row">
    <div class="form-field col-md-12 form-m-bttm">
      <input name="changepassword-password2" type="password" placeholder="Repita la nueva contraseña *" class="form-control required">
    </div>
  </div>
  <button id="changepassword-submit" type="submit" class="btn btn-primary">Cambiar contraseña</button>
</form>

Я вижу в документации, что можно использовать пользовательскую проверку, поэтому я написал следующую проверку, предназначенную для использования во втором поле пароля:

custom: {
  passwordmatch: function($el) {
    var matchValue = $('#changepassworde-password').value()
    if ($el.val() !== matchValue) {
      return "Passwords do not match"
    }
  }
}

Но я не знаю, где и как я могу определить эту пользовательскую проверку. Я понимаю, что однажды определив, я должен просто подать заявку data-passwordmatch='' на второе поле пароля.

1 ответ

Вы должны использовать атрибуты html, как указано в валидаторе

data-match="#inputToMatch" to ensure two fields match, e.g. password confirmations

Правила проверки указываются при вводе формы через следующие стандартные атрибуты HTML5:

type="email"
type="url"
type="number", with additional constraints via max, min and step attributes
pattern="Reg(ular )?Exp(ression)?" (for input types of text, search, tel, url or email)
required

А также следующие нестандартные атрибуты:

data-match="#inputToMatch" to ensure two fields match, e.g. password confirmations
data-minlength="5" to enforce a minimum amount of characters
data-remote="/path/to/remote/validator" to make an AJAX request to determine if the field is valid or not. Be sure to give the input a name attribute, as the request will be sent to /path/to/remote/validator?<name>=<value>. The remote endpoint should return a 200 OK if the field is valid, and a 4xx otherwise. Here's a reference server implementation using Express.