Hi, I have MDB Super Bundle Pro version. I was using MDB validation in my code.

I noticed that the validation does not work on Firefox.

Expected behavior

I took this script from this page :

MDB Validation

its supposed to show an error and form must not be submitted, if required fields are not provided.

Actual behavior

How ever the form gets submitted on Firefox even if the required field are not provided in input. It works fine on Chrome. but does not work on firefox.

Resources (screenshots, code snippets etc.)

HTML Code :

<form method="post" class="needs-validation" novalidate autocomplete="off" action="<?php echo site_url('account/update_password'); ?>" >
  <!-- Material outline input -->
  <div class="md-form md-outline ml-0 mr-0">
     <i class="fa fa-lock prefix custom-icon" ></i>


    <input type="password" autofocus id="password" class="form-control" name="password"  required  pattern="^\S*(?=\S{6,})(?=\S*[a-z])(?=\S*[A-Z])(?=\S*[\d])\S*$" validate autocomplete="off">
    <label for="password" data-error="Password must contain at least 6 characters, including Upper/Lowercase and numbers" data-success="Valid">New Password</label>
    <div class="invalid-feedback">
      Password must contain at least 6 characters, including upper/lowercase and numbers.
    </div>
  </div>
  <!-- Material outline input -->
  <div class="md-form md-outline ml-0 mr-0">
     <i class="fas fa-user-lock prefix  custom-icon" ></i>

    <input type="password" class="form-control" name="confirm_password" id="confirm_password" required  pattern="^\S*(?=\S{6,})(?=\S*[a-z])(?=\S*[A-Z])(?=\S*[\d])\S*$" validate autocomplete="off">
    <label for="confirm_password">Confirm Password</label>
    <div class="invalid-feedback">
      Confirm Password should match the password field.
    </div>
  </div>

  <div class="form-row">
    <div class="md-form md-outline col-md-5 mb-3 ml-0 mr-0">
      <i class="fas fa-mobile-alt prefix  custom-icon" ></i>
      <input type="text" pattern="^(\+?\d{1,3}|\d{1,4})$" class="form-control" id="country_code" name="country_code"  maxlength="4" required  validate autocomplete="off">
      <label for="country_code">Country Code</label> 
      <div class="invalid-feedback">
        Please enter phone number in this format +91.
      </div>
    </div>
    <div class="col-md-7 mb-3 md-form md-outline">
      <label for="validationCustom022">Phone</label>
      <input type="text" class="form-control" id="validationCustom022" value="" required pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$" maxlength="10"  name="phone" id="phone">
      <div class="invalid-feedback">
        Please enter 10 Digit Phone Number.
      </div>
    </div>
  </div>
    <div class="text-center mt-4">
      <button class="btn btn-outline-primary waves-effect mt-1" id="Reset" type="submit">Update <i class="fas fa-shield-alt"></i></button>
    </div>
</form>

JavaScipt Code :

(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();