【发布时间】：2019-11-30 19:25:37
【问题描述】：
我使用 Bootstrap 4 来验证“联系我”表单。
成功提交表单后，我使用 $('#contactForm').trigger("reset"); 将其重置，这会清除输入字段，但这些仍被标记为已验证（验证图标和绿色边框还在）。
这会导致问题，因为我仅在验证所有输入后才启用提交按钮，并在提交后禁用它。但由于输入仍被标记为“有效”，任何字段中的任何有效条目都将启用按钮，即使其他字段为空（所有字段都是“必填”）。
请告知如何在提交表单后清除验证。谢谢！
重要提示：
我使用 Bootstrap 4。不是 3。我之所以提到它，是因为我在 SO 和其他地方经历了几十个条目，大多数答案都指向 bootstrap.validator这不是我的情况！
再次感谢。
我的html：
<div class="container"><br>
<div class="row">
<div class="col-lg-8 mx-auto">
<form id="contactForm" class="needs-validation" novalidate="novalidate">
<div class="control-group">
<div class="form-group">
Name<input type="text" id="name" class="form-control" pattern="^[a-zA-Z{1}[a-zA-Z-9 '\-]{1,29}$" required="required">
<div class="invalid-feedback"><a>Error...</a></div>
</div>
<div class="form-group">
Mail<input type="email" id="email" class="form-control" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}" required="required">
<div class="invalid-feedback"><a>Error...</a></div>
</div>
<div class="form-group">
Phone<input type="tel" id="phone" class="form-control" pattern="^[0-9\+]{1}[0-9\-]{9,17}$" required="required">
<div class="invalid-feedback"><a>Error...</a></div>
</div>
<div class="form-group">
Message<textarea type="text" id="message" class="form-control" rows="5" required="required"></textarea>
<div class="invalid-feedback"><a>Error...</a></div>
</div><br>
<div id="phpMailerResult"></div>
<div class="form-group text-center">
<button id="sendMessageButton" type="submit" class="btn btn-success btn-xl text-dark font-weight-bold">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
我的脚本：
$(document).ready(function() {
// ------------------------ Actions on SUBMIT --------------------
$('#sendMessageButton').click(function(e) {
e.preventDefault();
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
$.ajax({
url: "mail/contact_me.php",
method: 'post',
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success:function() {
$('#sendMessageButton').attr('disabled', true);
var jsSuccess1 = "<div class='alert alert-success>";
var jsSuccess2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×";
var jsSuccess3 = "</button>";
var jsSuccess4 = "<strong>Message sent successfully!</strong>";
var jsSuccess5 = "</div>";
$('#phpMailerResult').html(jsSuccess1);
$('#phpMailerResult > .alert-success').append(jsSuccess2, jsSuccess3, jsSuccess4, jsSuccess5);
$('#contactForm').trigger("reset");
},
error:function() {
$('#sendMessageButton').attr('disabled', true);
var jsFail1 = "<div class='alert alert-danger>";
var jsFail2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×";
var jsFail3 = "</button>";
var jsFail4 = "<strong>Something went wrong...!</strong>";
var jsFail5 = "</div>";
$('#phpMailerResult').html(jsFail1);
$('#phpMailerResult > .alert-danger').append(jsFail2, jsFail3, jsFail4, jsFail5);
},
});
return true;
});
// ----------------- Validate CONTACT form on input -----------------
let jsContactForm = document.getElementById('contactForm');
jsContactForm.querySelectorAll('.form-control').forEach(jsContactInput => {
jsContactInput.addEventListener(('input'), () => {
if (jsContactInput.checkValidity()) {
jsContactInput.classList.add('is-valid');
jsContactInput.classList.remove('is-invalid');
} else {
jsContactInput.classList.add('is-invalid');
jsContactInput.classList.remove('is-valid');
}
let jsIsValid = $(jsContactForm.querySelectorAll('.form-control')).length === $(jsContactForm.querySelectorAll('.form-control.is-valid')).length;
if (jsIsValid) {
$('#sendMessageButton').attr('disabled', false);
} else {
$('#sendMessageButton').attr('disabled', true);
}
});
});
});
【问题讨论】：
标签： jquery validation bootstrap-4 reset