gpt4 book ai didi

单击按钮时的 jQuery 表单验证

转载 作者:行者123 更新时间:2023-12-03 21:27:31 27 4
gpt4 key购买 nike

我有一个简单的页面,其中包含一个表单和表单外的一个按钮。我正在尝试验证单击按钮时的表单。我在 document.onready 函数上添加了表单验证规则。然而,该表格尚未得到验证。

HTML:-

<html>
<head>
<script src="lib/jquery1.5.2.js"></script>
<script src="lib/jquery.validate.js"></script>
<script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1">
Field 1: <input id="field1" type="text" class="required">
</form>

<div>
<input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS:-

$(document).ready(function(){

$("#form1").validate({
rules: {
field1: "required"
},
messages: {
field1: "Please specify your name"

}
})

$('#btn').click(function() {
$("#form1").validate(); // This is not working and is not validating the form
});

});

知道出了什么问题吗?

最佳答案

在您的 click 处理程序中,错误是 .validate() 方法;它仅初始化插件,不验证表单

要消除表单中的提交按钮,请使用.valid()触发验证检查...

$('#btn').on('click', function() {
$("#form1").valid();
});

jsFiddle Demo

.validate() - 在 DOM 就绪时初始化插件(使用选项)一次

.valid() - 检查验证状态( bool 值)或随时触发表单上的验证测试。

否则,如果 form 容器中有一个 type="submit" 按钮,则不需要特殊的 click 处理程序,并且.valid() 方法,因为插件会自动捕获该方法。

Demo without click handler

<小时/>

编辑:

您的 HTML 中还存在两个问题...

<input id="field1" type="text" class="required">
  • .validate() 中声明规则时,不需要 class="required"。这是多余的。

  • 缺少 name 属性。规则在 .validate() 中通过其名称进行声明。该插件依赖于唯一的 name 属性来跟踪输入。

应该是...

<input name="field1" id="field1" type="text" />

关于单击按钮时的 jQuery 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13671710/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com