You are viewing limited content. For full access, please sign in.

Question

Question

Number Fields - Limiting Entry to Quarter Hour Increments

asked on November 15, 2017

Hello everyone,

We have a situation whereby users are to fill out a number field with two decimal places, the default value being 0.00. The problem is, users are filling out the form with marginal increments of hours, which doesn't make sense for payroll purposes... for example, 3.10, or 8.83. These numbers need to either be whole or else only be allowed in quarter-hour increments (.00, .25, .50, or .75).

The problem is, I'm not sure how to restrict this within the confines of a number field in a column of a table. We already have 8 fields in each table row, so I do not want to add additional fields if possible to rectify the issue. Rather, I'd like to use JavaScript, a regular expression, something to basically make the value rejected and have an error message show if the value is not one of those accepted values. Does anyone know how to achieve this? Thank you in advance for your help!

0 0

Replies

replied on November 15, 2017 Show version history

You can use regular expression for validation for a single line field, not a number field.

[^.]+\.25|[^.]+\.50|[^.]+\.75|[^.]+\.00

Here's a way you can get it working using JavaScript and still have a number field.

//Using the provided element selector and message, add an error message next to the field
  function showCustomError(elementSelector, errorMessage)
  {
    hideCustomError(elementSelector); //remove previous error

    $(elementSelector + ' input').addClass('custom-error');
    $(elementSelector + ' input').focus();
    $(elementSelector + ' input').parent().append('<p class="custom-error-message">' + errorMessage + '</p>');
  }

  //Hide the custom error generated by the showCustomError function
  function hideCustomError(elementSelector)
  {
    $(elementSelector + ' input').removeClass('custom-error');
    $(elementSelector + ' input').siblings('.custom-error-message').remove();
  }

$(document).ready( function () {
  var formValid = true;
  $('#q1 input').on('change', function () {
    var num = $(this).val();
    if (num.endsWith(.00) == true || num.endsWith(.25) == true || num.endsWith(.50) == true ||num.endsWith(.75) == true) 
    {
      formValid = true;
      hideCustomError('#q1');
    }
    else
    {
      formValid = false;
      showCustomError('#q1', 'Please enter a number ending with .00, .25, .50, or .75');
    }
  })
  $('input[type=submit]').click
    (
      function(e)
      {
        if(!formValid)
        {
          e.preventDefault(); //stop the form from being submitted
          showCustomError('#q1', 'Please enter a number ending with .00, .25, .50, or .75.');
        }
        else
        {
          hideCustomError('#q1');
        }
      }
    );   
});

Borrowed heavily from here.

 

EDIT: I should clarify that the number field does not have the same "Regular expression for validation" advanced field option as do single line fields. You can still use JS for pattern matching purposes. e.g. 

   $('#q1 input').on('change', function () {
    var num = $(this).val();
    if (num.match(/[^.]+\.25|[^.]+\.50|[^.]+\.75|[^.]+\.00/) != null) 
    {
      formValid = true;
      hideCustomError('#q1');
    }
    else
    {
      formValid = false;
      showCustomError('#q1', 'Please enter a number ending with .00, .25, .50, or .75');
    }
  })

 

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.