'How To Prevent Form Submission And Tell Users That Input Cannot Be Three Numbers

I have spent so many hours searching for either an HTML input tag or Javascript that prevents form submission when input is only 3 numbers. I don't want to use characters because my input field only requires numbers.

<input name="Code" value="000" onchange="leadingZeros(this)" onkeyup="leadingZeros(this)"
   onclick="leadingZeros(this)" autocomplete="off" id="myInput"   type='text' required=""   />

function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
  input.value = '000' + input.value;
}

}

I am using the code above on my form to force the input of three zeros (000) before the numbers users provide in the input field.

Some users might forget to fill out that field and proceed to submit my form and the form will get submitted because it detects that the field isn't empty.

Some users forget to fill out the field and I only get the three zeros (000) when the form gets submitted.

I want to prevent the form submission when they forget to input their numbers after the first three zeros and tell users that INPUT CAN NOT BE 3 NUMBERS.

That will remind them that the first three zeros had been in the input field and they still have to provide their numbers after it.

How can I do this, please?

javascripthtmlformsvalidation


Solution 1:[1]

You could use form validation. For instance, to force an input of three zeroes followed by one or several digits:

<input pattern="^000\d+$" required />

Solution 2:[2]

You can write your codee like this to achieve the purpose. Read the comments for moree understanding

HTML code

  <form id="myForm">
    <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required=""   />
    </form>

JavaScript Code

document.querySelector('#form').addEventListener("submit", function(e) {

//prevent default behaviour
e.preventDefault()

// collect input value
let inputValue = document.querySelector('#myInput').value

//check whether input value is not number or less than 3 char
 if(!isNaN(inputValue) || inputValue.length < 3){
 alert('Error. Input must be a number and more than 3 characters')

    }
//  submit the form data with with AJAX
    })

If you do not know how to use AJAX nor do not intend to use AJAX, you may have your HTML written like this with button/ input type='button' so that the form do not submit automatically when user press on the button

    <form id="myForm">
    <input name="Code" value="000" autocomplete="off" id="myInput" type='text' required=""   />
     <button type="button" id="myButton"> submit </button>
    </form>

Then you use JavaScript to submit the form when the button is clicked like this

document.querySelector('#myButton').addEventListener("click", function(e) {

    //prevent default behaviour
    e.preventDefault()

    // collect input value
    let inputValue = document.querySelector('#myInput').value

    //check whether input value is not number or less than 3 char
     if(!isNaN(inputValue) || inputValue.length < 3){
     alert('Error. Input must be a number and more than 3 characters')

        }

    //submit form
    document.querySelector('#form').submit()

        })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vincent
Solution 2 ket-c

Related Questions