forms - Bootstrap 4 重置模态表单验证

Question

我尝试了很多方法来重置引导模式表单(数据和验证)但都没有成功。

ie 没有问题，但是 firefox 在重置或重新加载表单时字段仍然显示为红色。

如果知道 bootstrap 4 的人可以帮助我解决这个问题，那就太好了。

诚挚的，Hafid。

这是一个工作示例:

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

就用

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

代替

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

当你重置时，它会跨浏览器