How can I implement this regex for number validation in a form?

Question

If I enter the exact number of 300000, the form is submitted. Any other value below or above 300000 causes the error message to display. The error message should only display when the value is less than 300000. What's the error in my code?

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#sbutton').addEventListener('click', function(event) {
    event.preventDefault();
    let inputV = document.querySelector('#budget').value.trim();
    let budgetRegex = /^3[0-9]{5,}/;
    const errorMessage = document.querySelector('#errormsg');
    let form = document.querySelector("form");
    if (inputV == "" || !budgetRegex.test(inputV)) {
      errorMessage.innerHTML = "Value should be at least 300,000.";
      errorMessage.style.display = 'block';
    } else {
      errorMessage.innerHTML = "";
      errorMessage.style.display = 'none';
      form.submit();
    }
  });
});

<form action="https://dragonmm.xyz" method="post">
  <div class="contact-box">
    <div class="left1"></div>
    <div class="right1">
      <h2>Start</h2>
      <label for="name"></label>
      <input id="name" type="text" class="field" placeholder="Name" required>

      <label for="email"></label>
      <input id="email" type="text" class="field" placeholder="Email" required>

      <label for="phone"></label>
      <input id="phone" type="text" class="field" placeholder="Phone" required>

      <label for="budget"></label>
      <input id="budget" type="text" name="budget" class="field budgetInput" placeholder="Budget" required>
      <div id="errormsg"></div>
    </div>
  </div>
  <button type="submit" value="Send" class="btn1" id="sbutton">Send</button>
</form>

Why are you using a regexp for number validation? Convert the input to a number, then just do a normal arithmetic comparison. — Barmar
– Barmar, Commented Jan 24, 2023 at 18:28
Your regexp matches 300000-399999, 3000000-3999999, 30000000-3999999. Do you see a pattern? It only matches numbers that start with 3 and have at least 5 digits after that. — Barmar
– Barmar, Commented Jan 24, 2023 at 18:30
The number comparison Barmar suggests would be a lot easier to handle input like 00000000000001. Even easier would be to use a number input with min and max. developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number — erik258
– erik258, Commented Jan 24, 2023 at 18:34
The normal arithmetic comparison works. I didn't think of that. — Zero Hour
– Zero Hour, Commented Jan 24, 2023 at 18:44

KooiInc · Accepted Answer · 2023-01-24 18:49:15Z

Use a numeric input field (type="number"). Use the min attribute of the field to limit the input (although a user can still input her own text). Next, convert values to Number, so you can do calculations.

Here's a minimal example, using event delegation.

Finally: you should always check values server side too.

document.addEventListener(`input`, handle);

function handle(evt) {
  if (evt.target.id === "budget") {
    if (+evt.target.value < +evt.target.min) {
    //  ^convert to Number
      return document.querySelector(`#budgetError`)
        .classList.remove(`hidden`);
    }
    return document.querySelector(`#budgetError`)
        .classList.add(`hidden`);
  }
}

#budgetError {
  color: red;
}

.hidden {
  display: none;
}

<input id="budget" type="number" min="300000"> budget
<div id="budgetError" class="hidden">
  Not enough! We need at least 300,000</div>

Collectives™ on Stack Overflow

How can I implement this regex for number validation in a form?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related