How to validate decimal fields in semantic-ui?

0

Issue

In semantic-ui, is it possible to validate decimal numbers?
For integers one can easily set:

$('.ui.form')
  .form({
    fields: {
     field1: {
       rules: [
          {
            type   : 'integer[1..20]',
          }
       ]
     },
  ....

and have the integer validated only if it falls into the specified range.
I’d need to do the same for a decimal input (that needs to fall into the range 1.99 – 100.99) but the same approach used for integers does not seem to work.
How can I achieve this? Thank you.

Solution

I solved this issue like this:

$(document).ready(function() {

  $.fn.form.settings.rules.greaterThan = function (inputValue, validationValue) {
      return inputValue >= validationValue;
  };
  $.fn.form.settings.rules.smallerThan = function (inputValue, validationValue) {
      return inputValue <= validationValue;
  }
  $('.ui.form')
    .form({
      on: 'blur',
      fields: {
        decimal: {
          rules: [
            {
              type   : 'decimal',
              prompt : 'Please enter a decimal number here'
            },
            {
              type: 'greaterThan[1.99]',
              prompt: 'The price should be greater than 1.99',
            },
            {
              type: 'smallerThan[100.99]',
              prompt: 'The price should be less than 100.99',
            },
          ]
        },
      }
    })
  ;
});

In this way, you’ll validate upon three rules that combine to get the desired results.

Answered By – Giulia

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More