jquery 来自变量的验证规则参数

jquery validation rules parameter from variable

我有 current_stock 变量,每次我单击“编辑”按钮时,该变量都会由 ajax 请求更新。在 ajax 请求成功后,它会弹出一个这样的模态

我使用 jQuery 验证来验证表单。规则之一是最大值。我正在尝试将最大值设置为 current_stock 变量。 我正在尝试这个:

$("#form_detail").validate({
    rules: {
        jumlah: {
            required: true,
            number: true,
            max: current_stock
        }
    },
    messages: {
        jumlah: {
            required: "Jumlah tidak boleh kosong.",
            number: "Jumlah hanya dapat diisi dengan angka.",
            max: "Tidak bisa melebihi sisa Stok"
        }
    },
    submitHandler: function(form) {
        save_edit();
    }
});

但它总是说 current_stock 变量为 0。 我尝试使用控制台打印变量,变量值是正确的。但验证中的值始终为 0。 这是我初始化 current_stok 变量

的地方
 <script type="text/javascript">
        var base_url = "<?php echo base_url()?>";
        var current_stock = 0;
 </script>

这是发出 ajax 请求并弹出模态

的函数
    function edit_jumlah(id_penjualan, id_barang) {
    $.ajax({
        url: base_url + "index.php/transaksi/get_by_id/" + id_penjualan + "/" + id_barang,
        type: "GET",
        dataType: "JSON",
        success: function(data) {
            $('[name="harga"]').val(data.harga_jual);
            $('[name="id_penjualan"]').val(data.id_penjualan);
            $('[name="id_barang_modal"]').val(data.id_barang);
            $('[name="nama_barang"]').val(data.nama_barang);
            $('[name="jumlah"]').val(data.jumlah);
            $('[name="sisa_stok"]').val(data.stok);
            current_stock = data.stok;
            $("#modal_detail").modal("show");
        },
        error: function(jqXHR, textStatus, errorThrown) {

        }
    })
}

这是验证函数

 $("#form_detail").validate({
        rules: {
            jumlah: {
                required: true,
                number: true,
                max: sisa_stok
            }
        },
        messages: {
            jumlah: {
                required: "Jumlah tidak boleh kosong.",
                number: "Jumlah hanya dapat diisi dengan angka."
            }
        },
        submitHandler: function(form) {
            save_edit();
        }
    });

问题是 jQuery 验证器使用变量值,而不是它的引用:在验证初始化时,curent_stock 的值是 0,所以这将是传递的值验证器,而不是对变量的引用。

为此,您应该在每次 ajax 调用完成时修改字段规则,而不是:

current_stock = data.stok;

在您的 success 函数中,将其更改为:

$('[name="jumlah"]').rules('add', {
    required: true,
    number: true,
    max: data.stok,
    messages: {
        required: "Jumlah tidak boleh kosong.",
        number: "Jumlah hanya dapat diisi dengan angka.",
        max: "Tidak bisa melebihi sisa Stok"
    },
});

正如 muecas 在他的回答中解释的那样:

The problem is that jQuery validator uses the variable value, and not its reference: at the moment of the validation initialization the value of curent_stock is 0, so that will be the value passed to the validator, and not a reference to the variable.

但是,您无需重写元素上的所有规则即可使其正常工作。那是太多的代码冗余并且违反了 DRY(不要重复自己)原则。您需要做的就是使用 data.stok:

的新值更新 max 规则

$.ajax.success 中,更改此行:

current_stock = data.stok;

至:

$('#jumlah').rules('add', {
  max: data.stok
});

除非您需要它用于其他用途,否则您不需要变量 current_stock。在你的 $("#form_detail").validate 中,简单地给 `max 一个静态值:

max: 0