好的，我正在处理这个表单，我正在尝试自己的表单验证，因为jQuery表单验证器插件让我很头疼。我几乎能够从输入字段本身获得我需要的所有验证，但是现在我正在试图弄清楚如果有人忽略我的错误消息并且不知何故有一个年龄“CAT”（数字字段中有字母）。
我想我已经知道如何做到这一点， 但是我想弄清楚如何让表单检查每个KEYUP上的有效条目，看看是否有任何给定字段hasClass（“i-invalid”），然后禁用提交按钮。 我已经使用了一些文本输入字段，但我不知道怎么做这与复选框或无线电输入字段。第二个很重要，因为它占我表格的大部分。
然后我的RegExp变量突然停止工作。 我知道他们应该工作，因为我已经使用过了，我猜我已经在某个地方添加了一些阻止他们现在工作的代码。我无法测试所有这些，但我知道不是Letter而不是NoNumber应该可以工作，但不是出于某种原因。
这是我的jsFiddle
HTML
<h1>Survey</h1>
<form id="survey" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<table id="basic-info">
<tr>
<td><h3>Your Name:</h3>
<input type="text" name="BreederName" id="BreederName" size="30">
<span class="error"></span>
</td>
<td><h3>What year did you get involved?</h3>
<input type="number" name="YearStart" id="YearStart" maxlength="4" min="1925" max="2015">
<span class="error"></span>
</td>
</tr>
<tr>
<td><h3>What is your Organization's Name?</h3>
<input type="text" name="KennelName" id="KennelName" size="30">
<span class="error"></span>
</td>
<td><h3>Do you have a website?</h3>
<input type="url" name="Website" id="Website" size="50">
<span class="error"></span>
</td>
</tr>
<tr>
<td colspan="2"><h3>Would you like your contribution acknowledged on Contributor's page?</h3></br></br>
<input type="radio" name="credit" id="Credit" value="yes" width="20">Yes, I'd like my name, Organization name, and website listed on the Contributor's page. </br>
<input type="radio" name="credit" id="Credit" value="no" width="20">No, I'd rather contribute anonymously.
<span class="error"></span>
</td>
</tr>
</table>
<table class="wrapper">
<tr>
<th colspan="3"><lable for="exercise"><h2>Select a number 1 - 10.</h2>
<span class="error"></span></lable></th>
</tr>
<td>
<div>
<input type="radio" name="exercise" value="1" width="20">1</br>
</div>
</td>
<td>
<input type="radio" name="exercise" value="2" width="20">2
<input type="radio" name="exercise" value="3" width="20">3</br>
</td>
<td>
<input type="radio" name="exercise" value="4" width="20">4</br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="exercise" value="5" width="20">5
<input type="radio" name="exercise" value="6" width="20">6</br>
</td>
<td>
<input type="radio" name="exercise" value="7" width="20">7</br>
</td>
<td>
<input type="radio" name="exercise" value="8" width="20">8
<input type="radio" name="exercise" value="9" width="20">9</br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="exercise" value="10" width="20">10</br>
<
</td>
<td colspan="2">
<span class="value">Is there anything you'd like to mention?</span></br></br></br>
<textarea name="exercise-comment" rows="10" cols="50">Maxium 500 chars</textarea>
</td>
</tr>
</table>
<input type="submit" id="submit" class="invalid" value="Submit">
<span class="submit error"></span>
</form>
的jQuery
$(document).ready(function(){
$("input").addClass("i-invalid"); //Automatically set all input fields to invalid
$("input").focusin(function(){//highlight input field on focus
$(this).css("background-color", "yellow");
});
$("input").focusout(function(){
$(this).css("background-color", "white");
});
/*Run fields through their validators, if everything works, add a class of "Valid" or
something similar to check against when the submit button is hit*/
//RegExp variables
notLetters = /[^A-Za-z\s]/;
notNumber = /[^0-9]/;
notLimChar = /[^A-Za-z0-9\s.,?!]/;
notUrl = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
//Submitter Info
bName = $("#BreederName");
year = $("#YearStart");
kName = $("#KennelName");
website = $("#Website");
credit = $("#Credit");
bNameVal = bName.val();
yearVal = year.val();
kNameVal = kName.val();
websiteVal = website.val();
creditVal = credit.val();
//Trait Variables
exercise = $("#exercise").val();
exComment = $("#exercise-comment").val();
bName.on("keyup focusout", function(){
if (notLetter.test($(this).val())){
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).first(".error").text("Only letters are allowed");
} else if ($(this).val() == "") {
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Please enter your name");
} else {
$(this).removeClass("i-invalid").addClass("i-valid");
$(this).next(".error").text("");
}
});
year.on("keyup focusout", function(){
if (notNumber.test($(this).val())){
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Only numbers are allowed");
} else if ($(this).val() == "") {
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Please enter a year");
} else {
$(this).removeClass("i-invalid").addClass("i-valid");
$(this).next(".error").text("");
}
});
kName.on("keyup focusout", function(){
if (notLetter.test($(this).val())){
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Your entry has invalid characters");
} else if ($(this).val() == "") {
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Please enter your kennel name");
} else {
$(this).removeClass("i-invalid").addClass("i-valid");
$(this).next(".error").text("");
}
});
website.on("keyup focusout", function(){
if (notUrl.test($(this).val())){
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Please enter a valid web address.");
} else if ($(this).val() == "") {
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Please enter your website URL.");
} else {
$(this).removeClass("i-invalid").addClass("i-valid");
$(this).next(".error").text("");
}
});
credit.on("keyup focusout", function(){
if ($(this).val() == "") {
$(this).removeClass("i-valid").addClass("i-invalid");
$(this).next(".error").text("Would you like credit?");
} else {
$(this).removeClass("i-invalid").addClass("i-valid");
$(this).next(".error").text("");
}
});
// Constantly check form on keyup/mouseup for valid, completed form
$("input").on("keyup mouseup", function(){
if( bName.hasClass("i-invalid") || year.hasClass("i-invalid") || kName.hasClass("i-invalid") || website.hasClass("i-invalid") || credit.hasClass("i-invalid") || $("#exercise").hasClass("invalid") ) {
$("#submit").prop("disabled", true).removeClass("valid").addClass("invalid");
$(".submit").text("* All fields must be completed and contain valid entries before submitting.");
} else {
$("#submit").prop("disabled", false).removeClass("invalid").addClass("valid");
$(".submit").text("");
}
});
});
我觉得我的RegExp无效，因为我正在声明我的变量。我试图让我的变量全局化，所以我可以在任何函数中访问它们。我认为这就是我所做的，因为正如我所说，当出现问题时，至少有2个人已经在工作了。
编辑：我刚刚意识到我遗漏了我的notUrl RegEx变量。我试图去除bug时把它拿出来。
编辑2：我的notNumber和notLimChar RegEx变量正在运行。我仍然无法弄清楚我的notLetters变量有什么问题。此外，notUrl也不起作用，但现在这不是必需的。
编辑3：我的notLetter正在运行。我试图对它进行解密，并在代码中留下.first()，而不应该存在。我也意识到我不能将类添加到单选按钮，我一直试图选择错误的单选按钮。但是现在我不知道该怎么做，而且我很困惑。
在我的其他一个webforms中，我使用以下代码在jQuery中选择单选按钮，它以这种形式工作：
theGender = $("#form input[name=gender]:checked").val();
但是，相同的代码现在不适合我这种形式。我已经尝试将其修改为以下内容，但仍无法正常工作。当我尝试提醒值时，它会一直显示为Undefined。有人在某个地方看到错字吗？
credit = $(":radio[name=credit]:checked");
（此变量中未指定.val()，在必要的函数中单独调用它）
我添加了另一个编辑，但意识到我的问题是什么，所以我删除了它。
答案 0 :(得分：0)
验证后，如果验证失败并且您想要停止表单提交过程，则可以使用event.preventDefault（）函数。 它不会提交表格，并会将控件保留在同一页面上。
我相信这是你正在寻找的答案。
答案 1 :(得分：0)
了解如何使用onsubmit。通常做的是使用onsubmit="return checkfields()"和checkfields()这样的函数来检查字段是否正确填充。由于返回，只有存在return true时才会提交表单。你的功能应该是这样的：
<script>
function checkfields() {
// OFC you have to have id to your fields
var field1 = Document.getElementById("Field1").value;
var field2 = Document.getElementById("Field2").value;
if (field1 == "") {
alert ("Please, fill the first field");
return false; // THIS will tell the form NOT to submit
else
if (field3 == "") {
alert ("Please, fill the second field");
return false; // THIS will tell the form NOT to submit
}
// and again and again
// Here, if everything is correctly entered, just return true and the form will submit
else {
return true;
}
}
</script>