getElementById check if contains dimension

Question

There are several ways to check formfields like

document.getElementById('xx['+nr+']').value.length != ''
document.getElementById('xx['+nr+']').value.length != ''
document.getElementById('xx['+nr+']').value.length > 5

But how to check if an textfield in an form contains an text like 3512x525x88 ?

With an regex pattern? numbers x numbers x numbers ?

Possible duplicate of [How do I retrieve an HTML element's actual width and height?](https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height) — michaelitoh, Sep 07 '18 at 18:59
What have you tried? How would the dimension be in the element? This question would benefit from a minimal working example. — Thijs, Sep 07 '18 at 18:59
Yes, a regex does sound promising, did you try one? What happened when you tried? — Dour High Arch, Sep 09 '18 at 19:10

score 1 · Accepted Answer · answered Sep 07 '18 at 19:11

1

Use regex to check the numbers x numbers x numbers pattern. So, say you have the values from the text field into a variable called input. This should work ..

/^\d+x\d+x\d+$/i.test(input)

answered Sep 07 '18 at 19:11

rmn

1,119
7
18

score 1 · Answer 2 · answered Sep 07 '18 at 19:16

You could use a regex to match the value of the item.

const
  // This regex will match a text which:
  // - starts with one or more digits
  // - followed by an 'x'
  // - followed by one or more digits
  // - followed by an 'x'
  // - followed by one or more digits
  regexDimension = /^\d+x\d+x\d+$/;
  
// Get the elements from the DOM which may contain a dimension and iterate
// over all those elements.
document.querySelectorAll('.item').forEach(item => {
  // Check if the value of the element matches the regex.
  if (regexDimension.test(item.value.trim())) {
    // Do something with the element.
    item.style.backgroundColor = 'lightgreen';
    console.log(`Dimension found: ${item.value} (id=${item.id})`);
  }
});

<input class="item" type="text" value="1" id="not-me">
<input class="item" type="text" value="1x2" id="not-me-either">
<input class="item" type="text" value="1x2x3" id="pick-me">
<input class="item" type="text" value="3512x525x88" id="or-pick-me">

Thank you for the detailed description Thijs. – Muiter Sep 09 '18 at 09:47 — Muiter, Sep 09 '18 at 09:47

getElementById check if contains dimension

2 Answers2