bootstrap 3 validator - change password form

Question

I have a bootstrap 3 form and I am using validator to validate forms.

I have succesfully implemented basic validations for sign-in forms and now I am implementing validation of change password form.

The form is as follows:

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

I see in the documentation that custom validation can be used so I have written the following validation intended to be used in the second password field:

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

But I do not know where or how can I define this custom validation. I understand that once defined I should just apply data-passwordmatch='' to second password field.

score 0 · Answer 1 · answered Mar 27 '18 at 22:45

You should use html attributes as it is mentioned in the validator

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

Validation rules are specified on form inputs via the following standard HTML5 attributes:

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

As well as the following non-standard attributes:

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.

bootstrap 3 validator - change password form

1 Answers1