Javascript 从未调用jQuery自定义验证方法_Javascript_Jquery

Javascript 从未调用jQuery自定义验证方法

javascript jquery

Javascript 从未调用jQuery自定义验证方法,javascript,jquery,Javascript,Jquery,我有一些类似的HTML和JavaScript： <html> <head> <title>Validation Test</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validat

我有一些类似的HTML和JavaScript：

<html>
<head>
    <title>Validation Test</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myform">
        <input id="TotalHours" type="text" value="24"/> is the total number of hours!
        <input id="day" class="input" type="text"/> is the number of hours of daylight!
        <input id="night" class="input" type="text"/> is the number of hours of darkness!
        <script>
            validationRules = {
                TotalHours: {
                    TotalHoursMatch: true
                }
            };
            $.validator.addMethod("TotalHoursMatch", function(value, element) {
                // find total hours
                var reportedTotalHours = parseFloat($("#TotalHours").text());

                var totalHours = 0;
                $('input.input').each(function(i, sel) {
                    var hours = $(sel).find(":selected").text();
                    var f = parseFloat(hours);
                    if (f != 0 && !Number.isNaN(f))
                        totalHours += f;
                });

                // validate that hours are within a quarter hour of each other
                var difference = Math.abs(totalHours - reportedTotalHours);
                return difference < 0.25;
            }, "Total of hours for daylight and darkness must match total hours in a day.");

            function doSubmit()
            {
                $('form').validate({rules: validationRules});
                if (!$('form').valid())
                    alert('bad!');
                else
                    alert('ok');
            }
        </script>
        <button onclick="doSubmit();">submit</button>
    </form>
</body>
</html>


验证试验
是总小时数！
是白天的小时数！
是黑暗的小时数！
验证规则={
总小时数：{
TotalHoursMatch:正确
}
};
$.validator.addMethod（“TotalHoursMatch”，函数（值，元素）{
//查找总小时数
var reportedTotalHours=parseFloat（$（“#TotalHours”）.text（）；
var totalHours=0；
$（'input.input'）。每个（函数（i，sel）{
var hours=$（sel.find（“：selected”）.text（）；
var f=浮动（小时）；
如果（f！=0&&！Number.isNaN（f））
总小时数+=f；
});
//确认时间间隔在一刻钟以内
var差异=数学.abs（总小时数-报告的总小时数）；
返回差<0.25；
}，“白天和黑夜的总小时数必须与一天的总小时数相匹配。”）；
函数doSubmit（）
{
$（'form'）.validate（{rules:validationRules}）；
if（！$（'form'）.valid（）
警惕（“坏！”）；
其他的
警报（“正常”）；
}
提交

现在，由于某种原因，当我去验证表单时，从未调用自定义验证方法，即使我认为它设置正确。因此，始终显示“ok”；验证从未失败，因为未调用进行验证的方法。为什么会这样？连接验证时我遗漏了什么？

我找到了答案：我需要在第一个输入字段上设置一个

name=“TotalHours”

；

id

不够