您正在花费大量精力来尝试使 javascript 插件正常工作。
你会考虑使用 jQuery 吗？如果你还没有踢过它的轮胎，它比听起来容易得多——而且比普通的 js 打字更统一/更快。
要使用 jQuery，您只需要在文档中包含 jQuery 库，通常在 head 标签中，因此：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
然后，您可以轻松创建自己的验证例程，完全控制您正在做的事情。
这是一个工作示例供您学习。如您所见，代码非常少。
单击提交按钮 (#mysub) 时，我们会快速检查每个字段以查看它是否有效。如果任何字段验证失败，我们可以将控制权返回给用户，该字段已着色并处于焦点。
如果所有字段都通过验证，那么我们submit()在表单 ID 上发出该方法，然后将其关闭（到action="somepage.php"属性中指定的位置）。
请注意，我在底部添加了一些快速/脏代码，以从失败的验证中删除任何 css 着色。每次退出字段时都会运行此代码，无论该字段是否具有验证着色。这不是很有效（尽管它肯定不会伤害任何东西）并且只是为了展示什么是可能的。
嗯。我认为拥有一个具有某些属性的类会更有效，如果验证失败，则添加/删除该类。好的，我非常喜欢这个想法，因此我使用该方法创建了一个新的 jsFiddle来演示它的外观。
jsFiddle在这里
HTML：
<form id="fredform">
First Name: <input id="fname" name="fname" type="text"/>
Last Name: <input id="fname" name="fname" type="text"/>
Email: <input id="fname" name="fname" type="text"/>
<input id="mysub" type="button" value="Submit" />
</form>
jQuery：
arrValidate = ['fname','lname','email']
$('#mysub').click(function() {
var nextFld, i ;
for (i=0; i<arrValidate.length; i++){
nextFld = arrValidate[i];
if ( $('#'+nextFld).val() == '') {
alert('Please complete all fields. You missed the [' +nextFld+ '] field.');
$('#'+nextFld).css({'border':'1px solid red','background':'yellow'});
$('#'+nextFld).focus();
return false;
}
}
//if it gets here, all is okay: submit!
$('#fredform').submit();
});
//Remove any css validation coloring
$('input:not([type=button])').blur(function(){
$(this).css({'border':'1px solid lightgrey','background':'white'});
});
请注意，还有一个看起来很专业的 jQuery 验证插件。我自己没有玩过它，总是喜欢编写自己的东西，但这里是链接：
http://jqueryvalidation.org/documentation/
注意非常酷的演示
只是为了让你知道会发生什么：实现这个插件会比我上面建议的方法更难。
` ANSWER TO YOUR COMMENT QUESTION: `
关于您的评论和在 pastebin 上发布的代码：
（对不起，答案很长，但我希望它清楚。请仔细阅读。）
(1) 请将您的 javascript 代码包装在 document.ready 函数中。这是我的错; 我应该将它添加到我的代码示例中。否则，代码将在 DOM 完全存在之前执行，并且事件触发器不会绑定到控件（因为它们尚不存在于 DOM 中）。所以：
arrValidate = ['checkbox']; //a global variable
$(document).ready(function() {
$('#submit').click(function() {
var nextFld, i ;
for (i=0; i<arrValidate.length; i++){
nextFld = arrValidate[i];
if ( $('#'+nextFld).val() == '') {
alert('Please complete all fields. You missed [' +nextFld+ ']');
$('#'+nextFld).css({'border':'1px solid red','background':'yellow'});
$('#'+nextFld).focus();
return false;
}
}
//if it gets here, all is okay: submit!
$('#contact_form').submit();
}); //END #submit.click
}); //END document.ready
(2) 您的复选框仍然具有value="yes"破坏 javascript 的属性。请更改此：
<input type="checkbox" name="checkbox" id="checkbox" value="yes" /> <small>Ho
对此：
<input type="checkbox" name="checkbox" id="checkbox" /> <small>Ho
(3)type="submit"你的<input value="Invia">button不需要，也不需要name=该控件的属性。
首先是name=属性：它仅在将数据从该控件传递到处理您的表单的 PHP(?) 文件时才有用：( $_SERVER['SCRIPT_NAME'])。name=部分是变量名，控件的值是变量值。该按钮没有要传递的数据，因此不需要为其分配变量名。
接下来，type="submit": 这不是必需的，因为您可以随时使用 jQuery 提交表单。在过去，在 javascript/jQuery 之前，我们有表单。那时候，提交表单的唯一方法是使用type="submit"属性。没有这样的命令：$('#myFormId').submit();-- 但今天有。因此，将该属性更改为type="button"并让 jQuery 为您提交表单。相信我，这行得通！
另一件要考虑的事情：一旦你使用了，当你点击那个按钮时，type="submit"你必须处理表单的默认操作。当出现错误时，您不能简单地将控制权返回给用户，因为表单已被告知提交。（您必须使用它event.preventDefault()来覆盖默认行为——您可以稍后阅读。）
(4) 必须使用这些方法之一检查复选框值。复选框没有值。这又是我的错，我应该在我的示例中写一个复选框。
$('#submit').click(function() {
var nextFld, i ;
//Validate the checkbox:
if ( $('#checkbox').is(':checked') == false ) {
alert('You must read the informativa and check the checkbox at bottom of form');
return false;
}
//Validate the rest of the fields
for (i=0; i<arrValidate.length; i++){
submit()(5)如果任何元素=submit用作其 name= 或 id= 属性，则jQuery 的方法将不起作用。
这是一件很奇怪的事情，但你需要知道。我刚刚（再次）在对我的 jsFiddle 示例进行故障排除时学到了它。
如果您想使用 jQuery 通过该.submit()方法提交您的表单（我们也这样做了），那么您的表单中的任何元素都不能将name=orid=属性设置为“提交”。INPUT 按钮将name= 和 id=都设置为提交；这就是为什么它不起作用。
参考：http: //blog.sourcecoder.net/2009/10/jquery-submit-on-form-element-does-not-work/
请参阅 jsFiddle 中修改后的代码示例：
在这里修改了 jsFiddle
Please Please 请学习上面的jsFiddle。您应该能够完全转储 genvalidator 插件。如果你完全理解了 jsFiddle，那么作为程序员，你将进入一个新的地方。