How to create Input Field for fixed numeric value? - html

Question

I want to create a simple html input field where, for a specific numeric code, the continue/submit button will work.
For example, the submit button will go to its destination url, only if the input value is "1234". If the input value is not '1234' then the submit button will not proceed to next step.
Can anyone help?
Here the sollution i found. Big thanks to themoonroy.
https://github.com/Themoonroy/Basic-functions-code.git

Answer 1

test this code
document.getElementById("sub").addEventListener('click', ()=>{
var num_ = document.getElementById("num")
const validate = document.querySelector('#num + span.validate');
let pattern = /^([1234]{4})$/;
if(num_.value === ''){
num_.setAttribute('required','required')
}
else if(pattern.test(num_.value)){
num_.removeAttribute('required')
validate.textContent = "valid value"
}
else{
num_.removeAttribute('required')
num_.value = ''
validate.textContent = "invalid value !"
}
})
h1 {
text-align: center
}
input[type=number],
input[type=email],
select {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid black;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
}
input[type=submit] {
width: 25%;
background-color: #D39D10;
color: black;
padding: 14px;
margin: 20px 250px;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
input[type=submit]:hover {
background-color: green;
}
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}
<div class="ourform">
<form action="/">
<label for="name">number</label>
<input type="number" id="num" name="num" placeholder="Your number...">
<span class="validate" aria-live="polite"></span>
<input type="submit" value="Submit" id="sub">
</form>
</div>