jquery validation rules parameter from variable

Question

i have current_stock variable which is updated by ajax request everytime i clicked Edit button. after the ajax request success, it will popup a modal like this

im using jQuery validation to validate the form. one of the rules is max. im trying to set the max value equal to current_stock variable. im trying this :

$("#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();
    }
});

but it always says the current_stock variable is 0. i tried to print the variable using the console, the variable value is right. but the value in the validation is always 0. this is where i initialize the current_stok variable

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

this is the function that make an ajax request and popup the modal

    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) {

        }
    })
}

and this is the validate function

 $("#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();
        }
    });

Answer 1

As muecas explained in his answer:

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.

However, you don't need to rewrite all the rules on the element to make it work. That's too much code redundancy and a violation of the DRY (Don't Repeat Yourself) principle. All you need to do is update the max rule with the new value of data.stok:

In $.ajax.success, change this line:

current_stock = data.stok;

to:

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

Unless you need it for something else, you don't need the variable current_stock. In your $("#form_detail").validate, simply give `max a static value:

max: 0

Answer 2

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.

To achieve that, you should modify the field rule each time the ajax call has been completed, instead of:

current_stock = data.stok;

In your success function, change it to:

$('[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"
    },
});