jQuery 验证允许提交无效字段

Question

我有一个 ASP.NET MVC 表单，它使用 jQuery Validate 来执行验证。除了最后一个名为 'AmtRemaining' 的字段外，所有字段都可以正常验证。该字段有一个初始值，但该值会根据其他两个字段 ('AmtAdministered' & 'AmtWasted') 的值输入而变化。对该字段的验证是为了确保该值不低于零（使用 jQuery Validate 中的 min: 0 方法）。

现在，如果我跳转到 "AmtRemaining" 字段，然后跳出它，似乎验证有效。如果该值低于零，它会给我一条错误消息，但是，当我去提交表单时，即使该字段未通过验证，它也会允许表单提交。而且它只适用于这个领域。所有其他字段，如果无效，将导致表单无法提交。真奇怪。

这是我用于验证的 jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $('#DrugAdministerForm').validate({
            errorClass: 'errorText',
            rules: {
                    AdministeredByAutoComplete: {
                            required: true
                        },
                    AmtAdministered: {
                            required: true,
                            range: [0, 100000]
                        },
                    AmtWasted: {
                            range: [0, 100000]
                        },
                    WitnessAutoComplete: {
                            required: {
                                depends: function (element) {
                                    return ($('#AmtWasted').val() != "" &&
                                            $('#AmtWasted').val() != "0");
                                }
                            }
                        },
                    ProviderList: {
                            required:  true
                        },
                    AmtRemaining: {
                            min: 0                              
                        }
                },
            messages: {
                    AmtAdministered: {
                            required: "Required",
                            range: "Not a valid amount"
                        },
                    AmtWasted: {
                            range:  "Not a valid amount"
                        },
                    WitnessAutoComplete:{
                            required: "Required if waste"
                        },
                    AmtRemaining: {
                            min: "Must be greater than 0"
                        }
                }
                });
    });

</script>

此脚本用于根据"AmtAdministered"和"AmtWasted"的输入值计算"AmtRemaining"的值：

<script type="text/javascript">
    $(document).ready(function () {
        $('#AmtAdministered, #AmtWasted').blur(function () {
            var amtadmin = $('#AmtAdministered').val()
            var waste = $('#AmtWasted').val();
            var remaining = $('#InitialAmtRemaining').val();

            if (!waste)
            {
                waste = 0;
            }

            var tmp = (parseFloat(amtadmin) + parseFloat(waste));
            var result = (remaining - tmp);

            $('#AmtRemaining').val(result);
        });
    });

</script>

这是视图的代码，如果有人感兴趣的话

@using (Html.BeginForm("Add", "Patient", FormMethod.Post, new { id = "DrugAdministerForm" }))
{
    <br />
    <table class="Tbl">
        <tr>
            <td class="right">Lot #:  </td>
            <td class="left">@Html.TextBox("LotNumberReadOnly", @Model.SelectedLot.LotNumber, new { @readonly = "readonly", @class = "TxtBoxGray" })</td>
        </tr>
        <tr>
            <td class="right">Drug Name/Type:  </td>
            <td class="left">
                @Html.TextBox("DrugNameReadOnly", @Model.SelectedLot.DrugName, new { @readonly = "readonly", @class = "TxtBoxGray", @style = "width:400px" })
                @Html.Hidden("DrugEntryCodeHidden", @Model.SelectedLot.DrugEntryCode)
            </td>
        </tr>
        <tr>
            <td class="right">Site:</td>
            <td class="left">
                @Html.TextBox("SiteNameReadOnly", @Model.SelectedLot.SiteName, new { @readonly = "readonly", @class = "TxtBoxGray", @style = "width:400px" })
                @Html.Hidden("SiteNumberHidden", @Model.SelectedLot.SiteNumber)
            </td>
        </tr>
        <tr>
            <td class="right">Patient MRN:  </td>
            <td class="left">@Html.TextBox("PatientMrnReadOnly", @Model.Patient.Mrn, new { @readonly = "readonly", @class = "TxtBoxGray" })</td>
        </tr>
        <tr>
            <td class="right">Patient Name:  </td>
            <td class="left">@Html.TextBox("PatientNameReadOnly", @Model.Patient.FullNameLastNameFirst, new { @readonly = "readonly", @class = "TxtBoxGray" })</td>
        </tr>
        <tr>
            <td class="right">Date of Birth:  </td>
            <td class="left">@Html.TextBox("PatientDobReadOnly", @Model.Patient.DateOfBirth, new { @readonly = "readonly", @class = "TxtBoxGray" }) </td>
        </tr>
        <tr>
            <td class="right">Provider:  </td>
            <td class="left">@Html.DropDownList("ProviderList", "Choose...")</td>
        </tr>
        <tr>
            <td class="right">Administered By:  </td>
            <td class="left">@(Html.Kendo().AutoComplete().Name("AdministeredByAutoComplete").DataTextField("UserName").BindTo(Model.UserNames).Filter("contains")
                                            .HtmlAttributes(new { value = (string)ViewBag.LoggedInUserName, 
                                            style = "padding:0px; font-size:10pt; border-radius:0; color:#000; line-height:1em;" }))</td>
        </tr>
        <tr>
            <td class="right">Amount Administered (CCs):  </td>
            <td class="left">@Html.TextBox("AmtAdministered", null, new { @id = "AmtAdministered", @type = "text", @style = "width:30px"})</td>
        </tr>
        <tr>
            <td class="right">Amount Wasted (CCs):  </td>
            <td class="left">@Html.TextBox("AmtWasted", null, new { @style = "width:30px"})</td>
        </tr>
        <tr>
            <td class="right">Waste Witnessed By:  </td> 
            <td class="left">@(Html.Kendo().AutoComplete().Name("WitnessAutoComplete").DataTextField("UserName").BindTo(Model.UserNames).Filter("contains")
                                            .HtmlAttributes(new { style = "padding:0px; font-size:10pt; border-radius:0; color:#000; line-height:1em;" }))</td>
        </tr>
        <tr>
            <td class="right">Amount Remaining (Lot):  </td>
            <td class="left">@Html.TextBox("AmtRemaining", @Model.SelectedLot.CCsRemaining, new { @style = "width:50px", @readonly = "readonly", @class = "TxtBoxGray" })</td>
        </tr>
        <tr>
            <td class="right">@Html.Hidden("InitialAmtRemaining", @Model.SelectedLot.CCsRemaining)</td>
            <td class="left"><input type="submit" value="Record" /></td>
        </tr>
    </table>

}

有人知道为什么允许提交带有无效字段的表单吗？

Answer 1

AmtRemaining 字段似乎被标记为只读。我已经看到许多系统跳过只读验证，因为假定它们不会更改。

也许您可以在其他字段上放置一个 onChange 方法，以拒绝 AmtRemaining 的值低于零的更改。

jQuery 验证允许提交无效字段

jQuery Validate allowing invalid field to submit

asp.net

asp.net-mvc

jquery

unobtrusive-validation