在启用提交按钮之前，检查字段是否具有有效的类并且不为空

Question

我早些时候问了这个问题，但运气不好，所以我正在用更好的措辞再试一次，希望我能解决我的问题。

我一直在处理一个小表单，它有一些输入，其中三个具有regex验证(email、number和postcode(。我有一个功能，可以在启用提交按钮之前检查表单中的所有字段是否已填写，但如果前面提到的字段无效(但已填写(，则该按钮仍将启用并允许提交。在启用提交按钮之前，我希望尝试合并一个检查字段是否也有效。

我从早上7点开始就一直在尝试，但没有运气，我试着检查他们是否有is-invalid类来禁用按钮，我试图实现jQuery Validate插件(我觉得它不是很有用(，真的我遇到了一点困难，不知道还能做什么。

我可以找到很多关于检查有效输入的答案，以及关于检查表格是否填写完整的答案，但没有一个同时包含这两者，我自己也尝试过，但没有成功。我们一如既往地感谢您的帮助。

这是我的：

// ~~~ phone number validation
function validateContact(number) {
var re = /^(+44s?7d{3}|(?07d{3})?)s?d{3}s?d{3}$/;
return re.test(number);
}
function validateC() {
var number = $("#number").val();
if (validateContact(number)) {
$("#number").removeClass("is-invalid");
return true;
} else {
alert('Please enter a valid phone number');
$("#number").addClass("is-invalid");
}
return false;
}
// ~~~ email validation
function validateEmail(email) {
var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validateE() {
var email = $("#email").val();
if (validateEmail(email)) {
$("#email").removeClass("is-invalid");
//        $("#submit").removeClass("toggle-disabled").prop("disabled", false);
return true;
} else {
alert('Please enter a valid email address.');
$("#email").addClass("is-invalid");
//        $("#submit").addClass("toggle-disabled").prop("disabled", true);
}
return false;
}
// ~~~ postcode validation
function validatePostcode(postcode) {
var re = /^[a-zA-Z]{1,2}[0-9][0-9A-Za-z]{0,1} {0,1}[0-9][A-Za-z]{2}$/;
return re.test(postcode);
}
function validateP() {
var postcode = $("#postcode").val();
if (validatePostcode(postcode)) {
$("#postcode").removeClass("is-invalid");
return true;
} else {
alert('Please enter a valid postcode');
$("#postcode").addClass("is-invalid");
}
return false;
}
// ~~~ validate if form is filled completely, toggles submit & edit button
$(document).on('change keyup', '.required', function(e) {
var disabled = true;
// var isValid = false;
$(".required").each(function() {
var value = this.value;
if ((value) && (value.trim() != '')) {
disabled = false;
$('.toggle-disabled').prop("disabled", false);
} else {
disabled = true;
$('.toggle-disabled').prop("disabled", true);
return false;
}
});
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
<input type="email" class="input form-control required" id="email" onchange="validateE()" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
<input type="tel" class="input number form-control required" id="number" onchange="validateC()" placeholder="Contact Number" name="Number" required>
</div>
<div class="col-md-6">
<input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
<input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

使用||而不是&&，因为在这里，如果任何一个条件是true，则需要禁用提交按钮。然后，添加一个额外的条件$(this).hasClass('is-invalid'))，用于检查输入是否有效。

演示代码 ：

// ~~~ phone number validation
function validateContact(number) {
var re = /^(+44s?7d{3}|(?07d{3})?)s?d{3}s?d{3}$/;
return re.test(number);
}
function validateC() {
var number = $("#number").val();
if (validateContact(number)) {
$("#number").removeClass("is-invalid");
return true;
} else {
alert('Please enter a valid phone number');
$("#number").addClass("is-invalid");
}
return false;
}
// ~~~ email validation
function validateEmail(email) {
var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validateE() {
var email = $("#email").val();
if (validateEmail(email)) {
$("#email").removeClass("is-invalid");
//        $("#submit").removeClass("toggle-disabled").prop("disabled", false);
return true;
} else {
alert('Please enter a valid email address.');
$("#email").addClass("is-invalid");
//        $("#submit").addClass("toggle-disabled").prop("disabled", true);
}
return false;
}
// ~~~ postcode validation
function validatePostcode(postcode) {
var re = /^[a-zA-Z]{1,2}[0-9][0-9A-Za-z]{0,1} {0,1}[0-9][A-Za-z]{2}$/;
return re.test(postcode);
}
function validateP() {
var postcode = $("#postcode").val();
if (validatePostcode(postcode)) {
$("#postcode").removeClass("is-invalid");
return true;
} else {
alert('Please enter a valid postcode');
$("#postcode").addClass("is-invalid");
}
return false;
}
// ~~~ validate if form is filled completely, toggles submit & edit button
$(document).on('change keyup', '.required', function(e) {
var disabled = true;
$(".required").each(function() {
var value = this.value;
//using or also added hasclass('is-invalid')
if (!(value) || (value.trim() === '') || ($(this).hasClass('is-invalid'))) {
disabled = false;
$('.toggle-disabled').prop("disabled", true);
}
});
//check disabled if true then also enabled.
if (disabled) {
$('.toggle-disabled').prop("disabled", false);
}
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="col-md-6">
<input type="email" class="input form-control required" id="email" onchange="validateE()" placeholder="Email Address" name="email">
</div>
<div class="col-md-6">
<input type="tel" class="input number form-control required" id="number" onchange="validateC()" placeholder="Contact Number" name="Number" required>
</div>
<div class="col-md-6">
<input type="text" id="postcode" class="input postcode form-control required" onchange="validateP()" placeholder="Post Code" name="postcode" required>
</div>
<div class="col-md-6">
<input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit" disabled>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>