【发布时间】：2021-04-11 18:04:39
【问题描述】：
我之前问过这个问题没有运气，所以我用更好的措辞再次尝试，希望我能解决我的问题。
我一直在研究一个有几个输入的小表单，其中三个有正则表达式验证（email、number 和postcode）。我有一个功能可以在启用提交按钮之前检查表单中的所有字段是否都已填写，但是如果前面提到的字段无效（但已填写），该按钮仍将启用并允许提交。我希望在启用提交按钮之前尝试检查这些字段是否也有效。
我从早上 7 点开始一直在尝试，但没有运气，我尝试检查他们是否有 is-invalid 类来禁用按钮，我尝试实现 jQuery Validate 插件（我觉得它不是很有用），并且真的是碰壁了，不知道还能做什么。
我可以找到很多关于检查有效输入的答案，也可以找到很多关于检查表格是否完整填写的答案，但没有一个包含两者，我自己尝试过，但它不起作用。一如既往地感谢任何帮助。
这是我所拥有的：
// ~~~ phone number validation
function validateContact(number) {
var re = /^(\+44\s?7\d{3}|\(?07\d{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>【问题讨论】：
标签： javascript html jquery validation