title: Bootstrap 4 reset modal form validation
body: <p>I tried many methods to reset a bootstrap modal form (data and validation) without success.</p>
  
  <p>No problem with ie, but with firefox the fields still appear red when resetting or reloading the form.</p>
  
  <p>It would be really nice if someone, knowing bootstrap 4, could help me to solve this problem.</p>
  
  <p>Cordially, Hafid.</p>
  
  <p>Here is a working example:</p>
  
  <p><a href="https://jsfiddle.net/Hafid/z306ext3/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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");
        }
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bob {
    margin-top: -1.0em;
  }
  
  .tob {
    margin-top: -.2rem;
  }
  
  label.error {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;button type="button" class="btn btn-info" style="margin-top:20px;" id="showModal" data-toggle="modal" data-target="#myModal"&gt;Call Modal&lt;/button&gt;
    &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;form class="form" role="form" id="firstform"&gt;
            &lt;div class="modal-header"&gt;
              &lt;H4 class="modal-title" id="myModalLabel"&gt;Test reset modal form&lt;/H4&gt;
              &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;Username&lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="text" class="form-control" name="userName" placeholder="Username"&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;Password&lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="password" class="form-control" name="password" placeholder="Password"&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;Password again&lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="password" class="form-control" name="confirm_password" placeholder="Veuillez entrer à nouveau Password"&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;Phone&lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="text" class="form-control" name="phone" placeholder="Numéro de téléphone"&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;E-mail&lt;/div&gt;
                &lt;/div&gt;
                &lt;input type="text" class="form-control" name="email" placeholder="E-mail"&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="input-group-prepend"&gt;
                  &lt;div class="input-group-text"&gt;Adresse&lt;/div&gt;
                &lt;/div&gt;
                &lt;select class="custom-select form-control" id="address" required&gt;
                  &lt;option value=""&gt;- Veuillez sélectionner -&lt;/option&gt;
                  &lt;option value="1"&gt;Grenoble&lt;/option&gt;
                  &lt;option value="2"&gt;Marseille&lt;/option&gt;
                  &lt;option value="3"&gt;Perpignan&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                Hobbies &amp;nbsp; : &amp;nbsp;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="checkbox" name="hobby" value="1"&gt;
                  &lt;label class="form-check-label"&gt;Natation&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="checkbox" name="hobby" value="2"&gt;
                  &lt;label class="form-check-label"&gt;Chanter&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="checkbox" name="hobby" value="3"&gt;
                  &lt;label class="form-check-label"&gt;Dormir&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                Gender &amp;nbsp; : &amp;nbsp;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="radio" name="sex" value="1"&gt;
                  &lt;label class="form-check-label"&gt;Homme&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="radio" name="sex" value="2"&gt;
                  &lt;label class="form-check-label"&gt;Femme&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="input-group mb-3"&gt;
                &lt;div class="custom-file"&gt;
                  &lt;input type="file" class="custom-file-input" id="file" name="file" lang="fr"&gt;
                  &lt;label class="custom-file-label" for="file"&gt;Sélectionner un fichier&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="input-group"&gt;
                S'abonner &amp;nbsp;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input type="checkbox" class="form-check-input" name="subscribe"&gt;
                &lt;/div&gt;
                &lt;br/&gt; - &amp;nbsp; Méthode &amp;nbsp; : &amp;nbsp;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="radio" name="stype" value="1"&gt;
                  &lt;label class="form-check-label"&gt;RSS&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class="form-check form-check-inline"&gt;
                  &lt;input class="form-check-input" type="radio" name="stype" value="2"&gt;
                  &lt;label class="form-check-label"&gt;Mail&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer justify-content-between"&gt;
              &lt;button type="reset" class="btn btn-secondary" id="btnReset"&gt;Reset&lt;/button&gt;
              &lt;button id="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>