Jquery Validate with Jquery-Price-Format

Question

How to make the field mandatory when the value is 0.00 using jquery validate ?

Following example in image:

As you can see in the image above, the person did not enter the value, when clicking the accept button, the jquery validate works normally the following image:

Now the problem is when type value 0,00. Follow the image :

As you can see from the image above, the value cannot be 0.00, it must be at least 0.01.

Follow the code below:

Html:

<form id="myform">
<input type="text" class="form-control" value="@Model.Valor" id="valor" name="valor" placeholder="Digite o seu valor">
</form>

Javascript:

$('#valor').priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.'
});

Jquery Validate:

$(document).ready(function () {

        $("#myform").validate({
            ignore: ":hidden",
            rules: {
                valor: { required: true }
            },
            messages: {
                valor: "<span style=\"color: #a94442;\">Campo Valor é obrigatório *</span>"
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            submitHandler: function (form) { etc ....}

I use Jquery-Price-Format. When typing 0.00, jquery should show warning. When it is 0.01 take the jquery validate warning. That is, if it equals 0.00, show red warning. Any solution ?

Answer 1

Should create a custom validation for that particular type and remove the prefix for only the test value, example:

jQuery.validator.addMethod("valuethanmorezero", function(value, element) {
      var valor = value.replace(".",",").replace(",",".");
      return this.optional(element) || (parseFloat(valor) >= 0.01);
}, "Valor tem que maior que 0,01");

Now you can pass the same full example validation:

$(function() {
  $('#valor').priceFormat({
    prefix: '',
    centsSeparator: ',',
    thousandsSeparator: '.'
  });
  
  jQuery.validator.addMethod("valuethanmorezero", function(value, element) {
      var valor = value.replace(".",",").replace(",",".");
      return this.optional(element) || (parseFloat(valor) >= 0.01);
  }, "Valor tem que maior que 0,01");
  
  $("#myform").validate({
    ignore: ":hidden",
    rules: {
      valor: {
        required: true,
        valuethanmorezero: true
      }
    },
    messages: {
      valor: { 
      	required: "<span style=\"color: #a94442;\">Campo Valor é obrigatório *</span>",
        valuethanmorezero:"<span style=\"color: #a94442;\">Valor tem que maior que 0,01*</span>"
      }
    },
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    submitHandler: function(form) {}
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-price-format/2.1/jquery.priceformat.min.js"></script>

<form id="myform">
  <input type="text" class="form-control" value="0" id="valor" name="valor" placeholder="Digite o seu valor">
  <button>Enviar</button>
</form>

References

• jQuery.validator.addMethod()
• jQuery Validate Plugin - How to create a simple custom Rule?

Answer 2

Inserts this into the priceFormat:

clearOnEmpty: true