Javascript 单击时的表单验证无效

您好，我正在验证keyup上的输入字段，当单击submit按钮时

我没有使用输入类型submit，因为我不想在提交表单后重新加载页面

当输入为空或值错误时，会显示错误消息。在keyup上，它工作正常，但在单击时未触发

//验证
功能验证（字段）{
var值=field.val（）；
var to_label=field.parent（）.find（'label'）；
var错误=错误；
var错误消息=“”；
to_label.find（'span'）.remove（）；
if（field.hasClass（'validate-field'）&&value=''）{
错误=真；
document.getElementById（“name”）.style.borderBottom=“1px solid#ff0000”；
document.getElementById（“email”）.style.borderBottom=“1px solid#ff0000”；
}else if（field.hasClass（'valid-name'）&&valid\u name（value）==false）{
错误=真；
错误消息='名称必须仅包含字符'；
document.getElementById（“name”）.style.borderBottom=“1px solid#ff0000”；
}else if（field.hasClass（'valid-mail'）&&valid\u email（value）==false）{
错误=真；
错误消息='无效电子邮件'；
document.getElementById（“email”）.style.borderBottom=“1px solid#ff0000”；
};
如果（错误==true）{
添加（“”+错误消息+“”）；
}
}
$（'.validate字段'）。在（'keyup'，function（）上{
验证（$（此））；
});
$（“#联系我们表单”）。单击（函数（）{
var字段=$（this.find（'.validate字段'）；
验证（字段）；
});
函数有效\u名称（值）{
var valid=/^（[a-zA-Z\.\-\+]）+$/；
返回有效的.test（值）；
}
功能有效\u电子邮件（值）{
var valid=/^（[a-zA-Z0-9\.\-\+]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
返回有效的.test（值）；
}

发送

您的单击侦听器位于一个按钮上：

$('#contact-us-form').click(function(){
    var field = $('.validate-field'); // <---- HERE is the change.
    validate( field );
});

$（“#联系我们表单”）。单击（函数（）{
var-field=$（'.validate-field'）；//@Zain，在Keyup事件中它起作用，因为您一次只验证一个元素，而在单击按钮时，您有多个字段，因此必须按如下所示迭代循环。
当您获得类为“.validate field”的所有元素时

 $('#contact-us-form').click(function(){
        var field = $('.validate-field');
    $.each(field,function(index,element){
    // You can add more logic for break look if form is invalid at first element.
        validate( $(element));
    //break;
    }

});

我没有使用输入类型提交，因为我不想在提交表单后重新加载页面。
您应该始终拥有一个提交按钮。如果您不想提交表单，请挂接表单的
提交
事件，并阻止该事件的默认操作