循环遍历表单元素并验证每个字段JQuery/Javascript？

我正在尝试为每个字段创建动态表单验证。表单上的每个元素都在单独的div中扭曲。表单上的任何必填字段都在label元素上设置了“required”类。以下是我的表格示例：

$（'.datepick'）。每个（函数（）{
$（this）.attr（'readonly'，true）.css（“背景色”，“#dcdc”）.datepicker({
格式：“mm/dd/yyyy”，
变化月：对，
变化年：是的，
showOn:“聚焦”，
showButtonPanel：是的，
closeText:“清除”，
onClose:function（）{
var event=arguments.callee.caller.caller.arguments[0]；
if（$（event.delegateTarget）.hasClass（'ui-datepicker-close'））{
$（this.val（“”）；
}
} 
});
});
。必填项：在{
内容：“*”；
颜色：红色；
右边距：5px；
}

信息
姓氏：
名字：
出生日期：
运动：
--选择运动--
#杜斯奈姆#

您不需要任何JavaScript来验证所需字段。只需将
required
属性添加到所需的表单元素中

您还必须将“提交”按钮更改为实际的
type=“submit”
按钮，以便触发验证。您当前的“按钮”只是一个常规按钮，单击该按钮时不会执行任何特殊操作

另外，请记住，任何类型的客户端验证都很容易被想要绕过它的人绕过，因此，在提交表单时，您应该始终在服务器上重新验证


$（'.datepick'）。每个（函数（）{
$（this）.attr（'readonly'，true）.css（“背景色”，“#dcdc”）.datepicker({
格式：“mm/dd/yyyy”，
变化月：对，
变化年：是的，
showOn:“聚焦”，
showButtonPanel：是的，
closeText:“清除”，
onClose:function（）{
var event=arguments.callee.caller.caller.arguments[0]；
if（$（event.delegateTarget）.hasClass（'ui-datepicker-close'））{
$（this.val（“”）；
}
} 
});
});
//提交事件处理程序
$（“#我的表格”）。在（“提交”，功能（evt）{
log（“只有当所有字段都有效时才到达此代码。”）；
evt.preventDefault（）；//取消事件
evt.stopPropagation（）；//防止事件冒泡
//在这里执行AJAX调用
});
。必填项：在{
内容：“*”；
颜色：红色；
右边距：5px；
}
输入[type=“text”]，选择.datepick{
框大小：边框框；
宽度：10em；
}
.提交{
文本对齐：居中；
边缘：1米；
}
标签{
显示：内联块；
宽度：100px；
}

信息
姓氏：
名字：
出生日期：
运动：
--选择运动--
#杜斯奈姆#
为什么不将
required
属性添加到所需的表单元素中，然后就不必编写任何代码了？或者，只需编写
document.queryselectoral（“.required”）
即可使用
required
类获取所有元素，而不是遍历所有内容并对类进行测试？大多数（如果不是全部的话）代码都是不必要的。您所说的“您不必编写任何代码”是什么意思？如果您向表单元素添加
required
属性，浏览器将自动对该元素进行验证。我已尝试，但浏览器未捕获必填字段…请参阅下面的答案以了解工作示例。我已尝试对输入字段执行“必填”，但在单击“提交”后，我看不到任何消息。。。这是JQuery验证还是其他什么？@espresso_coffee这是HTML验证。不需要JavaScript和JQuery。这是所有HTML5浏览器内置的本机行为。您是否看到我的评论，您必须将按钮更改为
input type=“submit”
，以便触发验证？否则，您将永远无法提交表单。没有它，你只需要一个按钮，什么都不做。你试过在这里运行我的代码片段吗？这对你有用吗？在我改变类型提交验证工作之后。更改要提交的类型还有另一个问题。此按钮链接到Ajax函数。在我点击提交后，我的表格被提交了。如何防止这种情况发生？@espresso_coffee这是一个不同的问题，但答案是在
表单上设置
submit
事件处理程序，并在其中取消提交事件。我会用这个代码更新答案。你能提供一个能解决这个问题的例子吗？