javascript - Set regex for only 2 decimal numbers + dot + comma with jquery validator plugin

Question

I use jQuery Validation Plugin to perform client side form validation. It works well. However, I don't know precisely Regex and I'm not able to achieve what I want.

I would like to add 3 different Regex in order to display 3 different messages depending on what the user enter in input field.:

• Regex 1 detect if it is not a number with a specific message
• Regex 2 accept dot or comma for decimal with a specific message
• only 2 numbers for decimal after dot or comma with a specific message

There are plenty of questions related but I've tried a lot of answers on SO which don't work well.

Here is a working snippet

jQuery.validator.addMethod("decimal", function(value, element) {
  // Validating Decimal Numbers
  return this.optional(element) || /^([0-9]+[.]?[0-9]?[0-9]?|[0-9]+)$/g.test(value);
}, 'Please enter only numbers (format 0.00)');

jQuery.validator.addMethod("two_decimal", function(value, element) {
  // require 2 decimals
  return this.optional(element) || /^((d+(\.d{0,2})?)|((d*(.d{1,2}))))$/.test(value);
}, "Pleaser enter 2 numbers after dot");

// https://jqueryvalidation.org
$("#test_form").validate({

  submitHandler: function(form) {
    form.submit();
  },
  // rules, options, etc.,
  onkeyup: function(element) {
    // "eager" validation
    this.element(element);
  },
  rules: {
    decimal_number: {
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
      two_decimal: true
    }
  },
  messages: {
    montant_demande: {
      required: "Please enter a number",
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>

Answer 1

If you want only number , or decimal with coma , and dot . separator with only two decimals ,

See below snippet :

let decimalMessage = "";

jQuery.validator.addMethod("decimal", function(value, element) {
  let decimal = /[^0-9.,]/g.test(value);
  let decimalWithTwoDecimalNumber = /^d+([.,]d{2})?$/.test(value);
  
    
  if(decimal) {
    decimalMessage = 'Please enter only numbers (format 0.00)'
    return this.optional(element);
  }
  if(decimalWithTwoDecimalNumber )
    decimalMessage = 'Pleaser enter 2 numbers after dot'
  
  return this.optional(element)||decimalWithTwoDecimalNumber 
},function(params, element) {
    return decimalMessage
});



// https://jqueryvalidation.org
$("#test_form").validate({

  submitHandler: function(form) {
    form.submit();
  },
  // rules, options, etc.,
  onkeyup: function(element) {
    // "eager" validation
    this.element(element);
  },
  rules: {
    decimal_number: {
      required: true,
      minlength: 1,
      maxlength: 10,
      decimal: true,
    }
  },
  messages: {
    montant_demande: {
      required: "Please enter a number",
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="test_form" method="get" action="">
  <fieldset>
    <legend>Test</legend>
    <p>
      <label for="decimal_number">Number decimal</label>
      <input id="decimal_number" name="decimal_number" minlength="2" type="text" required>
    </p>
  </fieldset>
</form>