javascriptjqueryjquery-validation-engine

jquery validation rules parameter from variable


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 enter image description here

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

Solution

  • 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"
        },
    });