javascriptjqueryregexparsley.js

How to validate input field with jQuery Currency formater using Parsley Validate? (Maybe RegEx?)


I have an input field that use a JavaScript to convert the number enteret into Danish currency (20000 will display like 20.000,00 kr.) .. in this input I need to validate that (using Parsley Validate) the following:

  1. The entered is only digits.
  2. Number is between 10000 and 200000.

I have tried to use data-parsley-type="digits" data-parsley-length="[5,6]" which offcause validates that the number is no lower than 10000, but will also validate 999999, which offcause is not perfect but that would be OK if I was not able to put the limit on 200000 .. The biggest issue is that Parsley validates the input when I write in the input box, but when I "step outside" the input the JavaScript that converts the input to currency format is triggered, and now the input field have "." and "kr." so Parsley validate is returning that the input is wrong.

How can I make Parsley validate i.e "10.000,00 kr." but fail on "1k.000.00 kr."? .. Maybe RegEx? .. but how?

var currencyInput = document.querySelector('input[type="digits"]')
var currency = 'DKK' // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

 // format inital value
onBlur({target:currencyInput})

// bind event listeners
currencyInput.addEventListener('focus', onFocus)
currencyInput.addEventListener('blur', onBlur)


function localStringToNumber( s ){
  return Number(String(s).replace(/[^0-9.-]+/g,""))
}

function onFocus(e){
  var value = e.target.value;
  e.target.value = value ? localStringToNumber(value) : ''
}

function onBlur(e){
  var value = e.target.value

  var options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}



$(function () {
  $('#SendNewFixedEmployeeForm').parsley().on('field:validated', function() {
    var ok = $('.parsley-error').length === 0;
    $('.bs-callout-info').toggleClass('hidden', !ok);
    $('.bs-callout-warning').toggleClass('hidden', ok);
  })
  .on('form:submit', function() {
    return true;
  });
});
<link href="http://parsleyjs.org/src/parsley.css" rel="stylesheet"/>

<form id="SendForm" action="#" method="post" class="demo-form" data-parsley-validate="" data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
<input type='digits' class="maxLength form-control" width="400" value="0" name="CurrencyField" id="CurrencyField" aria-describedby="basic-addon2" data-parsley-type="digits" data-parsley-length="[5,6]" data-parsley-errors-container="#Sallary-errors" required/>

<button type="submit" form="SendForm">Submit</button>

</form>

<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-4eb31870-42c1-91aa-5c3e-9c5b016d4ea4" crossorigin></script>


Solution

  • Instead of data-parsley-length, use data-parsley-min and data-parsley-max