Jquery 如何在表单重置后添加/删除类并重新验证？

我从以下位置找到此代码：

$（文档）.ready（函数（）{
var errorMessage=“请匹配指定的格式。”；
$（this）.find（“textarea”）.on（“输入更改属性更改”，函数（）{
var模式=$（this.attr（“模式”）；
if（typeof pattern！==typeof undefined&&pattern！==false）{
var patternRegex=new RegExp（“^”+pattern.replace（/^^^^\$$/g）”）+“$”，“g”）；
hasError=！$（this）.val（）.match（patternRegex）；
if（typeof this.setCustomValidity==“函数”）{
此.setCustomValidity（hasError？errorMessage:）；
}否则{
$（this.toggleClass（“error”，！！hasrerror）；
$（this.toggleClass（“ok”！hasError）；
if（hasrerror）{
$（this.attr（“title”，errorMessage）；
}否则{
$（此）.removeAttr（“标题”）；
}
}
}
});
$（“#重置”）。单击（函数（）{
$（“#form1”）.reset（）；
if（$（'[name=“textA5”]'）.hasClass（“错误”））{
$（“#form1”）.toggleClass（“错误”）；
}
});
});
。错误{
背景色：红色；
}

你有一个错误。检查格式。

您需要添加
$（this）.toggleClass（“error”！！hasrerror）内部
您的
if（type of this.setCustomValidity
也
$（“.errMSG”）.toggle（！！hasrerror）；
用于错误范围信息（不要忘记.errMSG
显示的css类：无
）


要删除所有错误并重置表单，请使用此选项（注意它有
.setCustomValidity（“”）
）以及从文本区域删除类：

$（“#重置”）。单击（函数（）{if（$（'[name=“textA5”]'）。hasClass（“error”）{$（'[name=“textA5”]'））[0]。setCustomValidity（''）；$（'[name=“textA5”]'）。removeClass（“error”）.val（“”；$（.errMSG”）.hide（）；}；


工作：



。错误{
背景色：红色；
大纲：无；
}
.errMSG{
显示：无}

您有一个错误。请检查格式。

您的“错误”机制未正确触发，您调用了一个不存在的函数：“reset（）”

我将切换代码移动到一个单独的函数，以便随时调用它，参数：


需要切换的
元素
hasrerror
是否出错（真/假）
msg
要显示的错误消息

[重置]-按钮将显示/隐藏任何“红色”。。。。
仅出于测试目的，我将光标重新定位在
textarea
的开头

更新

正如承诺的那样，对原始代码进行了一些更改


我添加了添加次要错误文本元素的可能性（
.errMSG
，在您的示例中），包括一些CSS，以便在
出现
.error
时隐藏/显示消息
Javascript现在重置所有设置了
.error
的元素（不仅仅是
）
修正了空的
仍可能触发错误的错误
添加了一些有用的评论

警告：Javascript必须打包在一个函数中，不仅在
document.ready（）
上运行，而且在用户刷新页面后运行。当前，当
出现错误且用户点击[F5]（刷新页面）时，错误状态被重置，但不会针对仍然存在的数据运行

更新2

使JS代码更通用，现在处理定义了
[pattern]
的所有元素。在JS中重新引入HTML默认“有效性检查”。扩展HTML和CSS以反映/测试更改


“使用严格”；
//
。错误{背景色：红色}
.errMSG{display:none}
.error+.errMSG{display:initial}
：无效，/*删除默认红色边框*/
：-moz ui无效{框阴影：无；轮廓：无}
/*赏心悦目/仅演示*/
/*无法处理“位置：相对”，但可以*/
.area容器{位置：相对；填充底部：4rem}
.error+.errMSG{位置：绝对；底部：2rem；左侧：0}

您有一个错误。请检查TEXTA5格式。
您有一个错误。请检查TEXT1格式。
您有错误。请检查TEXTA6格式。
您有一个错误。请检查TEXT2格式。
在CSS集合类中
.error{background color:red}
或做其他讨厌的事情…（即使用
.error
）.Reset按钮：如果
文本区
包含
.error
则
切换类（“error”）
@Rene van der Lende-我在OP中编辑了代码，但仍然无法使用。新代码错误：
$(“#form1”）[0]。reset（）；
=>“reset”不是一个函数。不过，
textarea
会有一个红色边框。请发布一些被认为对测试不正确的文本……若验证失败，请键入任何特殊字符（例如，=，*，%）谢谢！我仍在尝试在我的实际表单中实现这一点。在我的HTML中，我有其他包含错误消息的span标记。默认情况下，它们是
display:none
。在触发验证错误时，我在何处和添加什么代码来切换可见性？我在我的OP中为HTML代码添加了一个示例。@Jeff，您可以使用CSS
。errMSG{display:none}.error+.errMSG{display:initial}
，但这需要一些额外的JS，因为现在只有
name=“textA5"
是有针对性的。但请注意，您的OP问题目前已经解决。我也正在解决第二个问题，稍后将发布更新，但我认为接受任何一个答案都是公平的。感谢您的更新。我非常感谢您抽出时间。与原始表单不同，更新后的表单现在似乎可以提交了即使图案不匹配，也要进行ted。如果图案不匹配，您如何禁止表单提交