Javascript html5表单验证具有多个sumbit的多个表单

您好，我有两个div，其中包含一个输入字段，提交时提交单击其切换，因此第一个包含电话号码，提交时提交单击将显示另一个div，其中包含otp字段，并在此处提交我的html5表单验证不起作用。因此，如何使用两个单独的“提交时提交”对两个表单执行验证单击“切换的写入逻辑”。在代码段中，第一个表单电话号码将跳过验证

$（“#num”）。单击（函数（）{
$（“#otpdiv”）.show（）；
$（“#numberdiv”）.hide（）；
});
$（“#otpbutton”）。单击（函数（）{
$（“#otpdiv”）.hide（）；
$（“#detailsdiv”）.show（）；
});

使用者
欢迎使用电子商务收费




电话号码：



欢迎使用电子商务收费




检察官办公室：



名称
戈德温
财产
戈德温
房间号
戈德温
床号
戈德温
钱包金额余额
戈德温
千瓦时（克）
戈德温
上次读取日期和时间
戈德温
备注-强制性
戈德温
首先，您不应该有两个提交按钮。第一个按钮只是在表单数据输入过程中进一步推进，所以它应该只是一个常规按钮

然后，在“实际提交”按钮上，您已经设置了一个
单击
事件处理程序，但是使用
提交
按钮，您希望处理表单的
提交
事件

话虽如此，您是否真的在任何地方提交了任何数据？如果没有，那么您不应该使用任何提交按钮或表单，只使用常规按钮

注:

您的提交按钮上还有
required
，它不起任何作用，不需要按钮


$（“#num”）。单击（函数（）{
//强制表单进行验证
如果（$（“#txtTel”）[0]。检查有效性（）{
$（“#otpdiv”）.show（）；
$（“#numberdiv”）.hide（）；
}否则{
//显示有效消息
$（“#txtTel”）[0].reportValidity（）；
}
});
//这是您在此需要的表单的提交事件
$（“#ebcharge”）。提交（函数（）{
$（“#otpdiv”）.hide（）；
$（“#detailsdiv”）.show（）；
});

使用者
欢迎使用电子商务收费




电话号码：



欢迎使用电子商务收费




检察官办公室：



名称
戈德温
财产
戈德温
房间号
戈德温
床号
戈德温
钱包金额余额
戈德温
千瓦时（克）
戈德温
上次读取日期和时间
戈德温
备注-强制性
戈德温
首先，您不应该有两个提交按钮。第一个按钮只是在表单数据输入过程中进一步推进，所以它应该只是一个常规按钮

然后，在“实际提交”按钮上，您已经设置了一个
单击
事件处理程序，但是使用
提交
按钮，您希望处理表单的
提交
事件

话虽如此，您是否真的在任何地方提交了任何数据？如果没有，那么您不应该使用任何提交按钮或表单，只使用常规按钮

注:

您的提交按钮上还有
required
，它不起任何作用，不需要按钮


$（“#num”）。单击（函数（）{
//强制表单进行验证
如果（$（“#txtTel”）[0]。检查有效性（）{
$（“#otpdiv”）.show（）；
$（“#numberdiv”）.hide（）；
}否则{
//显示有效消息
$（“#txtTel”）[0].reportValidity（）；
}
});
//这是您在此需要的表单的提交事件
$（“#ebcharge”）。提交（函数（）{
$（“#otpdiv”）.hide（）；
$（“#detailsdiv”）.show（）；
});

使用者
欢迎使用电子商务收费




电话号码：



欢迎使用电子商务收费




检察官办公室：



名称
戈德温
财产
戈德温
房间号
戈德温
床号
戈德温
钱包金额余额
戈德温
千瓦时（克）
戈德温
上次读取日期和时间
戈德温
备注-强制性
戈德温
更改此行

<input id="num" type="submit" value="submit" required>



这条线和验证将完美地工作

<input id="num" type="submit" name="numname" value="workingSubmit" />





使用者
欢迎使用电子商务收费




电话号码：



欢迎使用电子商务收费




检察官办公室：



名称
戈德温
财产
戈德温
房间号
戈德温
床号
戈德温
钱包金额余额
戈德温
千瓦时（克）
戈德温
上次读取日期和时间
戈德温
备注-强制性
戈德温
$（“#num”）。单击（函数（）{
$（“#otpdiv”）.show（）；
$（“#numberdiv”）.hide（）；
});
$（“#otpbutton”）。单击（函数（）{
$（“#otpdiv”）.hide（）；
$（“#detailsdiv”）.show（）；
});
更改此行

<input id="num" type="submit" value="submit" required>



这条线和验证将完美地工作

<input id="num" type="submit" name="numname" value="workingSubmit" />





使用者
欢迎使用电子商务收费




电话号码：



欢迎使用电子商务收费




检察官办公室：