我尝试了很多方法来重置引导程序模式（数据和验证）但没有成功。
没有问题，但是使用firefox时，字段在重置或重新加载表单时仍然显示为红色。
如果有人知道bootstrap 4可以帮助我解决这个问题，那将是非常好的。
亲切地，Hafid。
这是一个有效的例子：
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 :
<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 :
<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
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="subscribe">
</div>
<br/> - Méthode :
<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>
答案 0 :(得分：0)
只需使用
$("#myForm input").val();
而不是
$("#myForm")[0].reset();
重置时，它将是跨浏览器