Form.checkValidity checking that two password fields match

Asked
Active3 hr before
Viewed126 times

6 Answers

fieldschecking
90%

I'll provide the example for BootStrap4 and assume jQuery as an optional but common BootStrap dependency to abbreviate $("#pw1").val()

Using this should work.

var form = document.getElementById("form-validation");
form.addEventListener("submit", function(event) {
   if (document.getElementById("validation2").value != document.getElementById("validation3").value) {
      alert("Password mismatch");
      event.preventDefault();
      event.stopPropagation();
   } else if (form.checkValidity() == false) {
      event.preventDefault();
      event.stopPropagation();
   }
   form.classList.add("was-validated");
}, false);
load more v
88%

To illustrate this issue consider the example of a form with two password input fields that must match:,Current Implementation Issues and Limitations,For example, if you had two password fields you wanted to enforce be equal you could use the following:,Dig into the current limitations of the spec and browser implementations.

<input id="foo" />
<input id="bar" />
<script>
   document.getElementById('foo').validity.customError; //false
   document.getElementById('bar').setCustomValidity('Invalid');
   document.getElementById('bar').validity.customError; //true
</script>
load more v
72%

var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
65%

By choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address.,In HTML5, basic constraints are declared in two ways:,In addition to the type attribute described above, the following attributes are used to describe basic constraints:,By setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without the need for JavaScript.

<form>
   <label for="ZIP">ZIP : </label>
   <input type="text" id="ZIP">
   <label for="Country">Country : </label>
   <select id="Country">
      <option value="ch">Switzerland</option>
      <option value="fr">France</option>
      <option value="de">Germany</option>
      <option value="nl">The Netherlands</option>
   </select>
   <input type="submit" value="Validate">
</form>
load more v
75%

On the client side, validation can be done in two ways:,When the input value matches the above HTML5 validation, it gets assigned a psuedo-class :valid, and :invalid if it doesn't.,Form validation can happen on the client side and the server side.,You can perform JavaScript validation in two ways:

Let's try an example:

<form>
   <label for="firstname"> First Name: </label>
   <input type="text" name="firstname" id="firstname" required maxlength="45">
   <label for="lastname"> Last Name: </label>
   <input type="text" name="lastname" id="lastname" required maxlength="45">
   <button>Submit</button>
</form>
load more v
40%

HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.,As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server-side validation. They do not require a .was-validated parent class.,<input>s and <textarea>s with .form-control (including up to one .form-control in input groups),Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).

<form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4">
      <label for="validationCustom01" class="form-label">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
         Looks good!
      </div>
   </div>
   <div class="col-md-4">
      <label for="validationCustom02" class="form-label">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
         Looks good!
      </div>
   </div>
   <div class="col-md-4">
      <label for="validationCustomUsername" class="form-label">Username</label>
      <div class="input-group has-validation">
         <span class="input-group-text" id="inputGroupPrepend">@</span>
         <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
         <div class="invalid-feedback">
            Please choose a username.
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <label for="validationCustom03" class="form-label">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
         Please provide a valid city.
      </div>
   </div>
   <div class="col-md-3">
      <label for="validationCustom04" class="form-label">State</label>
      <select class="form-select" id="validationCustom04" required>
         <option selected disabled value="">Choose...</option>
         <option>...</option>
      </select>
      <div class="invalid-feedback">
         Please select a valid state.
      </div>
   </div>
   <div class="col-md-3">
      <label for="validationCustom05" class="form-label">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
         Please provide a valid zip.
      </div>
   </div>
   <div class="col-12">
      <div class="form-check">
         <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
         <label class="form-check-label" for="invalidCheck">
            Agree to terms and conditions
         </label>
         <div class="invalid-feedback">
            You must agree before submitting.
         </div>
      </div>
   </div>
   <div class="col-12">
      <button class="btn btn-primary" type="submit">Submit form</button>
   </div>
</form>
load more v

Other "fields-checking" queries related to "Form.checkValidity checking that two password fields match"