Use data attribute in javascript regex

Question

I have this script that I use to validate a number input field

if (fieldElement.getAttribute('type') == 'number') {
        var numberRegExp = /^\d{4}$/;

        var numberValidated = numberRegExp.test(fieldElement.value.trim());

        if (!numberValidated) {
          validated = false;

          if (!fieldElement.hasClass('error')) {

            if (fieldElement.nextElementSibling != undefined) {
              fieldElement.nextElementSibling.removeClass('js-hide');
              fieldElement.addClass('error');
            } else {
              var fieldErrorMessage = fieldElement.getAttribute('data-msg');
              var errorMessage = document.createElement('span');

              fieldElement.addClass('error');

              setTimeout(function () {
                errorMessage.addClass('error');
                errorMessage.innerHTML = fieldErrorMessage;
              }, timeout);

              fieldElement.parentNode.appendChild(errorMessage);
            }
          }
        }
      }

But I cannot find a solution to use

var numberRegExp = /^\d{4}$/;

with a data attribute with a min / max value

<input type="number" data-minlength="10" data-maxlength="10" />

like

var numberRegExp = /^\d{fieldElement.getAttribute('data-minlength')}$/;

which of course will not work

EDIT: Bah! Had a brainfart!

I can just check the length of the value

var minlength = fieldElement.getAttribute('data-rule-minlength');
var maxlength = fieldElement.getAttribute('data-rule-maxlength');

if(fieldElement.value.length < minlength || fieldElement.value.length > maxlength) {
   numberValidated = false;
}

You cannot have a regex validation for `type="number"`. It should be `type="text"`. And to create a regex dynamically, you would need something like `var numberRegExp = new RegExp("^\\d{ + fieldElement.getAttribute('data-minlength') + "}$";` — Wiktor Stribiżew, Feb 15 '18 at 09:01
may be you can try something like this `var numberRegExp = new RegExp('^\d{'+fieldElement.getAttribute('data-minlength')+'}$');`. mind you i did not test this by you can try. — Inus Saha, Feb 15 '18 at 09:02
Perhaps, a dupe of [How do you pass a variable to a Regular Expression JavaScript?](http://stackoverflow.com/questions/494035/how-do-you-pass-a-variable-to-a-regular-expression-javascript). — Wiktor Stribiżew, Feb 15 '18 at 09:13

score 0 · Accepted Answer · answered Feb 15 '18 at 09:11

0

instead of using a regex to test for a number just use !isNaN(fieldElement.value.trim())

answered Feb 15 '18 at 09:11

Liam Kenneth

982
1
11
21

I am not testing for just a number. It also have to be an exact length. It's a danish social security number which is 10 digits. – Morten Hagh Feb 15 '18 at 09:14
so do this then `!isNaN(fieldElement.value.trim()) && fieldElement.value.trim().length === 10` – Liam Kenneth Feb 15 '18 at 09:30

score 0 · Answer 2 · answered Feb 15 '18 at 09:12

0

You need to use RegExp constructor:

const minlength = fieldElement.dataset.minlength;
const reg = new RegExp('^\d{'+minlength+'}$');

answered Feb 15 '18 at 09:12

Bhojendra Rauniyar

83,432
35
168
231

@downvoter Can you please let me know the issue on this answer? – Bhojendra Rauniyar Feb 15 '18 at 09:16

score 0 · Answer 3 · answered Feb 15 '18 at 09:24

0

try the following. numberRegExp = new RegExp('^[0-9]{'+fieldElement.getAttribute('data-minlength')+'}$');

answered Feb 15 '18 at 09:24

Inus Saha

1,918
11
17

i have checked this code. it validates the number and length correctly. so please let me know if it works for you. – Inus Saha Feb 15 '18 at 09:43

Use data attribute in javascript regex

3 Answers3