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?
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 />
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()
})