Bootstrap 4 reset modal form validation

Question

I tried many methods to reset a bootstrap modal form (data and validation) without success.

No problem with ie, but with firefox the fields still appear red when resetting or reloading the form.

It would be really nice if someone, knowing bootstrap 4, could help me to solve this problem.

Cordially, Hafid.

Here is a working example:

Fiddle

jQuery.validator.addMethod("checkPhone", function(value, element, params) {
  var checkPhone = /0[1-68]([-. ]?[0-9]{2}){4}$/;
  return this.optional(element) || (checkPhone.test(value));
}, "Veuillez entrer le bon numéro de téléphone");
$("#btnReset").on('click', function(e) {
  var validator = $("#firstform").validate();
  validator.resetForm();
});
$('#myModal').on('hidden.bs.modal', function(e) {
  var validator = $("#firstform").validate();
  validator.resetForm();
})
$(function() {
  validateRule();
  $("#submit").on('click', function() {
    var validator = $(".form").validate();
    var flag = validator.form();
    if (flag) {
      alert("true");
    } else {
      alert("false");
    }
  });
});

function validateRule() {
  $(".form").validate({
    rules: {
      userName: {
        required: true,
        minlength: 3,
        maxlength: 10
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "[name='password']"
      },
      address: {
        required: true
      },
      phone: {
        checkPhone: true
      },
      email: {
        required: true,
        email: true
      },
      hobby: {
        required: true,
        minlength: 2
      },
      sex: {
        required: true
      },
      file: {
        required: true,
        accept: "image/jpg,image/jpeg,image/png,image/gif"
      },
      stype: {
        required: "[name='subscribe']:checked"
      }
    },
    messages: {
      userName: {
        required: "Veuillez entrer le nom d'utilisateur",
        minlength: "Le nom d'utilisateur ne peut pas être inférieur à {0} caractères",
        maxlength: "Le nom d'utilisateur ne peut pas dépasser les {0} caractères"
      },
      password: {
        required: "Veuillez entrer votre mot de passe",
        minlength: "Le mot de passe ne peut pas être inférieur à {0} lettres"
      },
      confirm_password: {
        required: "Veuillez entrer votre mot de passe",
        minlength: "Le mot de passe ne peut pas être inférieur à {0} lettres",
        equalTo: "Entrée de mot de passe incohérente deux fois"
      },
      address: {
        required: "Veuillez sélectionner l'adresse"
      },
      email: {
        required: "S'il vous plaît entrer l'email",
        email: "Format de boîte aux lettres incorrect"
      },
      hobby: {
        required: "Veuillez sélectionner un passe-temps",
        minlength: "Choisissez au moins {0} hobby"
      },
      sex: {
        required: "Veuillez sélectionner le sexe"
      },
      file: {
        required: "Veuillez télécharger une pièce jointe",
        accept: "Seules les images jpg, jpeg, png ou gif"
      },
      stype: {
        required: "Veuillez sélectionner une méthode d'abonnement"
      }
    },
    errorPlacement: function(error, element) {
      var mynom = $(element).attr('name');
      if (mynom == "stype") {
        //error.appendTo(element.parent().parent());
        error.insertAfter(element.parent().parent());
        error.addClass("tob");
      } else if (element.is(':radio') || element.is(':checkbox')) {
        //error.appendTo(element.parent().parent());
        error.insertAfter(element.parent().parent());
        error.addClass("bob");
      } else if (element.is(':file')) {
        error.insertAfter(element.parent().parent());
        error.addClass("bob");
      } else {
        error.insertAfter(element.parent());
        error.addClass("bob");
      }
    }
  });
}

.bob {
  margin-top: -1.0em;
}

.tob {
  margin-top: -.2rem;
}

label.error {
  color: red;
}

<div class="container">
  <button type="button" class="btn btn-info" style="margin-top:20px;" id="showModal" data-toggle="modal" data-target="#myModal">Call Modal</button>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form class="form" role="form" id="firstform">
          <div class="modal-header">
            <H4 class="modal-title" id="myModalLabel">Test reset modal form</H4>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          </div>
          <div class="modal-body">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">Username</div>
              </div>
              <input type="text" class="form-control" name="userName" placeholder="Username">
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">Password</div>
              </div>
              <input type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">Password again</div>
              </div>
              <input type="password" class="form-control" name="confirm_password" placeholder="Veuillez entrer à nouveau Password">
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">Phone</div>
              </div>
              <input type="text" class="form-control" name="phone" placeholder="Numéro de téléphone">
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">E-mail</div>
              </div>
              <input type="text" class="form-control" name="email" placeholder="E-mail">
            </div>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text">Adresse</div>
              </div>
              <select class="custom-select form-control" id="address" required>
                <option value="">- Veuillez sélectionner -</option>
                <option value="1">Grenoble</option>
                <option value="2">Marseille</option>
                <option value="3">Perpignan</option>
              </select>
            </div>
            <div class="input-group mb-3">
              Hobbies &nbsp; : &nbsp;
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="hobby" value="1">
                <label class="form-check-label">Natation</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="hobby" value="2">
                <label class="form-check-label">Chanter</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="hobby" value="3">
                <label class="form-check-label">Dormir</label>
              </div>
            </div>
            <div class="input-group mb-3">
              Gender &nbsp; : &nbsp;
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="sex" value="1">
                <label class="form-check-label">Homme</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="sex" value="2">
                <label class="form-check-label">Femme</label>
              </div>
            </div>
            <div class="input-group mb-3">
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="file" name="file" lang="fr">
                <label class="custom-file-label" for="file">Sélectionner un fichier</label>
              </div>
            </div>
            <div class="input-group">
              S'abonner &nbsp;
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" name="subscribe">
              </div>
              <br/> - &nbsp; Méthode &nbsp; : &nbsp;
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="stype" value="1">
                <label class="form-check-label">RSS</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="stype" value="2">
                <label class="form-check-label">Mail</label>
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="reset" class="btn btn-secondary" id="btnReset">Reset</button>
            <button id="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

Just use

$("#myForm input").val();

instead of

$("#myForm")[0].reset();

when you resetting, so it will be cross-browser