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>

Answer 1

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>