Jquery Validate max according to condition

Question

Jquery Validate max according to condition

Navigation

#1 by (4 votes)

3

I'm making a jquery.validate , can get the max to be dynamically, something like:

...
    max: function () {
    return $('#QtdEstoqueHidden').val();
...

Okay, it worked! (I store the max value in a hidden field that is dynamically replaced by an ajax on the page)

Now I want to ignore it depending on a <select> .

I tried to make it ignore the validation, but I could not, so I tried to make a max = 999999999 would be enough as if it were overflowing. but I could not Now it always releases the form.

Follow the jsfiddler link

javascript jquery jquery-validate

asked by anonymous 03.03.2017 / 21:47

1 answer

Use single or double quotation marks for strings in JavaScript? [duplicate] How do I unmark the previous radio button after selecting another?

score 4 · Accepted Answer

You can change the rules dynamically!

I've added the snippet below to the fiddle to demonstrate.

When there is a change in the combobox and if the value is 0 it removes the rule, otherwise it returns the rule.

jQuery.validator.setDefaults({
            debug: false,
            success: "valid"
        });
        $("#FormMov").validate({
            rules: {
                Quantidade: {
                    required: true,
                   max: function() {
                      var maxValue = $('#QtdEstoqueHidden').val();
                        return parseInt(maxValue);

                  }
                }
            },
            messages: {
                Quantidade: {
                    required: "é obrigatório",
                    max: "O valor deve conter um número menor que {0}"
                }
            }
        });
         $('select[name=TipoMovimentacao]').change(function(){
	         if ($('select[name=TipoMovimentacao]').val() == 0) {
           			console.log("remove regra");
                $('#Quantidade').rules('remove');
             }else{
            $('#Quantidade').rules('add', {
                max: function () {
                console.log("adiciona regra");
                        var maxValue = $('#QtdEstoqueHidden').val();
                        return parseInt(maxValue);
                    }
            });
             }
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>


<form action="#" id="FormMov" method="post" novalidate="novalidate">
  Max: <input type="text" id="QtdEstoqueHidden" value="43">
  <hr>
  <input data-val="true" data-val-number="The field Quantidade must be a number." data-val-required="The Quantidade field is required." id="Quantidade" name="Quantidade" type="number" value="0" aria-required="true" aria-invalid="false">
  <select class="form-control valid" data-val="true" data-val-required="The Tipo Movimentacao field is required." id="TipoMovimentacao" name="TipoMovimentacao" aria-invalid="false"><option value="">Selecione o tipo</option>
<option value="0">Ilimitado</option>
<option selected="selected" value="1">Limitar Max</option>
<option value="2">Limitar Max 2</option>
</select>
  <button type="submit" class="btn btn-primary pull-right">Salvar</button>
</form>