Question

我的表格似乎从未得到验证；当<select>元素中报告的总小时数与#TotalHours字段中的值不匹配时，我希望收到某种消息。相反，当我提交表格时什么也没有发生。

我在这里想念什么？它与#TotalHours字段是一个只读字段（<div>而不是<input>）有关吗？

$(document).ready(function() {
  $.validator.addMethod("hours", function(value, element) {
    var totalHours = 0;
    $('select').each(function(i, sel) {
      var hours = $(sel).val();
      if (hours != "")
        totalHours += parseFloat(hours);
    });
    var reportedTotalHours = parseFloat($("#TotalHours").val());
    var difference = abs(totalHours - reportedTotalHours);
    return difference >= 0.25; // discrepacancy must be less than a quarter hour
  });

  $("#TheForm").validate({
    TotalHours: {
      hours: true
    }
  });
});

编辑：这是我表单的简化版本，其中显示了<select>个标记之一：

<form id="TheForm" method="get">
    <input type='hidden' id="xnid" name="xnid" value="f/PzSJBJ+Gzx9UaI1e3cR2nT/tCbbzkTVCA6uTk6GZ92JhJLXpp65QvIWZ48wEKGrYQy8CWLE0emOlK4fx2TbUcXAo2UPau2RHsXMwzNOIokcNQ5dlD//EmtiMB6XX0o+z6qZp1YaCdn4cYgK8erKbeueu4Ksxco4KdMZDvPDbuUTZYQTJbF8jlMJldUnvMrqvqWB1ZdAcAuFQFoKwq+nkigzEElYp0AoSeM5D+ki8mZ/3Ue3FaHO57tury53E1EQewMgXu08TblQjEMemUW1EwzKXnsP+YGZCGN0hMPN2W7LaCyq5jxy9M8LWvFRNPMO3IRFNeyAXw=" /><input type='hidden' name="EntityID" value="" /><input type='hidden' name="EntityType" /><input type='hidden' name="AssessmentID" value="4435" /><input type='hidden' name="AssessmentTypeID" value="6" /><a name='_0' /><div style="text-align:left;">
<!-- removed a few input fields with identifying information -->
        <script type='text/javascript'>
            $(document).ready(function () {
                $.validator.addMethod("hours", function (value, element) {
                    var totalHours = 0;
                    $('select').each(function (i, sel) {
                        var hours = $(sel).val();
                        if (hours != "")
                            totalHours += parseFloat(hours);
                    });
                    var reportedTotalHours = parseFloat($("#TotalHours").val());
                    var difference = abs(totalHours - reportedTotalHours);
                    return difference >= 0.25; // discrepacancy must be less than a quarter hour
                });

                $("#TheForm").validate({
                    TotalHours: {
                        hours: true
                    }
                });
            });
        </script>
        <a name='_Section1_2' /><div style="text-align:left;">
            <H4>2. Transportation Hours</H4><p></p><div class="jtx-row"><a class="right" style="margin-right:10px;" title="Next" href="#_Section1_3" tabindex="-1">Next</a><div class="right" style="text-align:left;">&nbsp;</div><a class="right" title="Top" href="#Section1" tabindex="-1">Top</a><div class="right" style="text-align:left;">&nbsp;</div><a class="right" title="Previous" href="#_Section1_1" tabindex="-1">Previous</a></div><div class="jtx-row">
                <div id='__E746-field' class='jtx-field fill90' style="width:300px;"><label for="">Answer</label><select id="__E746" name="E147" class="fill ddl" style="width:300px;" data-scopename=""><option value='' selected='true'></option><option value='721'>0</option><option value='718'>.25</option><option value='719'>.5</option><option value='720'>.75</option><option value='722'>1</option><option value='723'>1.25</option><option value='724'>1.5</option><option value='725'>1.75</option><option value='726'>2</option><option value='727'>2.25</option><option value='728'>2.5</option><option value='729'>2.75</option><option value='730'>3</option><option value='731'>3.25</option><option value='732'>3.5</option><option value='733'>3.75</option><option value='734'>4</option><option value='735'>4.25</option><option value='736'>4.5</option><option value='737'>4.75</option><option value='738'>5</option><option value='919'>5.25</option><option value='920'>5.5</option><option value='921'>5.75</option><option value='922'>6</option><option value='923'>6.25</option><option value='924'>6.5</option><option value='925'>6.75</option><option value='926'>7</option><option value='927'>7.25</option><option value='928'>7.5</option><option value='929'>7.75</option><option value='930'>8</option><option value='931'>8.25</option><option value='932'>8.5</option><option value='933'>8.75</option><option value='934'>9</option><option value='935'>9.25</option><option value='936'>9.5</option><option value='937'>9.75</option><option value='938'>10</option><option value='939'>10.25</option><option value='940'>10.5</option><option value='941'>10.75</option><option value='942'>11</option><option value='943'>11.25</option><option value='944'>11.5</option><option value='945'>11.75</option><option value='946'>12</option></select></div>
                <script type='text/javascript'>
                    $('#__E746').selectmenu({}).selectmenu('menuWidget').css('height', '100px');</script>
            </div>
        </div>
        <!-- more fields like the one above are here -->
</form>

这是我的#TotalHours <div>：

<div id='TotalHours' style='border: none;' class='display-field ui-widget-content ui-corner-all'>0.5</div><

如何在表单提交时触发jQuery验证？

0 个答案: