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

when click the Edit button, the Edit button also trigger the modal — Mochamad Ramdanny Lukman
– Mochamad Ramdanny Lukman, Commented May 21, 2018 at 16:35
Must be a scope issue. Post all the code refering to the modal and varible setting. — muecas
– muecas, Commented May 21, 2018 at 16:38
What are you trying to achieve with this line max: current_stock? Does the max change dynamically depending on the value of current_stock? If you're trying to validate the current_stock to make sure it is less than a max value, you need to provide the max value on that like, e.g. max: 50. — Racil Hilan
– Racil Hilan, Commented May 21, 2018 at 16:41
@muecas i edited the post with the code reference to modal and variable — Mochamad Ramdanny Lukman
– Mochamad Ramdanny Lukman, Commented May 21, 2018 at 18:00

muecas · Accepted Answer · 2018-05-21 18:30:22Z

1

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

edited May 21, 2018 at 18:30

answered May 21, 2018 at 18:13

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

muecas Over a year ago

@MochamadRamdannyLukman Great! Mark the answer as valid then. Thanks!

Mochamad Ramdanny Lukman Over a year ago

but can i write whole validate code in the ajax success? cause i getting trouble to set the message..

muecas Over a year ago

@MochamadRamdannyLukman getting trouble setting that specific field validation message? Let me edit my anwer.

Racil Hilan · Accepted Answer · 2018-05-21 21:09:00Z

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

Collectives™ on Stack Overflow

jquery validation rules parameter from variable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related