当我尝试更改规则时，验证所需的jquery不起作用

Question

我有2个字段。我想在第一个插入一个数字。第二个值应小于或等于第一个字段。

我正在使用jquery验证来警告用户，但是当我这样做时，它不会更改消息和布局。

我试图遵循文档，但不明白什么是错的。

<div class="form-group">
     <label class="control-label" for="inputDefault-4">Quantidade permitida por pedido<span class="text-danger">*</span></label>
            @Html.TextBoxFor(t => t.Produto.QuantidadeVenda, new { maxlength = "10", @class = "form-control", @id = "quantidade_pedido", placeholder = "0", validate = "required",@name = "quantidade_pedido" , @type = "number" })
</div>

<div class="form-group">
      <label class="control-label" for="inputDefault-4">Possui regime de comodato<span class="text-danger">*</span></label>
      <div>
          @Html.CheckBoxFor(t => t.Produto.FlagComodato, new { @class = "chk-inativar switcher-example-default", @id = "comodato", @onclick = "checkComodato(this)" })
      </div>
</div>
<div id="limitEmprestimo" style="display: none" class="form-group">
      <label class="control-label" for="quantidade_comodato">Quantidade limite de empréstimo <span class="text-danger">*</span></label>
      @Html.TextBoxFor(t => t.Produto.QuantidadeComodato, new { maxlength = "10", @class = "form-control", @id = "quantidade_comodato", placeholder = "0", validate = "required", @name = "quantidade_comodato", @type = "number"})
function checkComodato(check) {
    if (check.checked) {
        $("#limitEmprestimo").show();
    }
    else {
        $("#limitEmprestimo").hide();
    }
}

 $("#quantidade_comodato").focusout(function () {
    var quantc = $("#quantidade_comodato").val() === "" ? 0 : parseInt($("#quantidade_comodato").val());

    var quantp = $("#quantidade_pedido").val() === "" ? 0 : parseInt($("#quantidade_pedido").val());

    if (quantc > quantp) {

        var validator = $("#frmCadastro").validate();
        $("#quantidade_comodato").rules("remove", "required");
        $("#quantidade_comodato").rules("add", {
            max: quantp,
            messages: {
                quantp: "Invalid !"
            }
        });
        validator.element($(this));
    }
});

Answer 1

问题很可能是jquery脚本不在<script>标记内。因此，浏览器不会理解您的代码应该以javascript运行，而浏览器只是认为您的代码是纯文本。

试试这个：

<div class="form-group">
    <label class="control-label" for="inputDefault-4">Quantidade permitida por pedido<span class="text-danger">*</span></label>
    @Html.TextBoxFor(t => t.Produto.QuantidadeVenda, new { maxlength = "10", @class = "form-control", @id = "quantidade_pedido", placeholder = "0", validate = "required",@name = "quantidade_pedido" , @type = "number" })
</div>
<div class="form-group">
    <label class="control-label" for="inputDefault-4">Possui regime de comodato<span class="text-danger">*</span></label>
    <div>
        @Html.CheckBoxFor(t => t.Produto.FlagComodato, new { @class = "chk-inativar switcher-example-default", @id = "comodato", @onclick = "checkComodato(this)" })
    </div>
</div>
<div id="limitEmprestimo" style="display: none" class="form-group">
    <label class="control-label" for="quantidade_comodato">Quantidade limite de empréstimo <span class="text-danger">*</span></label>
    @Html.TextBoxFor(t => t.Produto.QuantidadeComodato, new { maxlength = "10", @class = "form-control", @id = "quantidade_comodato", placeholder = "0", validate = "required", @name = "quantidade_comodato", @type = "number"})
</div>

<script>

    function checkComodato(check) {
        if (check.checked) {
            $("#limitEmprestimo").show();
        }
        else {
            $("#limitEmprestimo").hide();
        }
    }

    $("#quantidade_comodato").focusout(function () {
        var quantc = $("#quantidade_comodato").val() === "" ? 0 : parseInt($("#quantidade_comodato").val());

        var quantp = $("#quantidade_pedido").val() === "" ? 0 : parseInt($("#quantidade_pedido").val());

        if (quantc > quantp) {

            var validator = $("#frmCadastro").validate();
            $("#quantidade_comodato").rules("remove", "required");
            $("#quantidade_comodato").rules("add", {
                max: quantp,
                messages: {
                    quantp: "Invalid !"
                }
            });
            validator.element($(this));
        }
    });

</script>

如果这不是问题，另一个典型的问题是jquery脚本在_layout.cshtml的末尾加载。因此，当您调用jquery时，尚未定义它。在这种情况下，您应该在开发人员控制台中收到脚本错误（在浏览器中点击F12以显示它）。

通过将脚本包装在Razor部分中，可以轻松纠正这一问题。

@section Scripts
{
    <script>
        // your code here
    </script>
}

“脚本”在_Layout.cshtml中被宣布为@RenderSection("Scripts", required: false)。