Input numbers must be 6 digit numbers or 9 digits numbers-CodePudding

I want to make that input numbers are 6 digits or 9 digits numbers. No less than 6 digits, not between 6 and 9 digits and no more than 9 digits numbers. May I know how can I make that? Codes will be insert below

<label  for="badgeid" style="margin-left: -50px;">ID:</label>;
            <div >;
            <p  style="margin-top: -6px;">
    <input type="number"  id="secuid" name="secuid" min="0" placeholder="Enter ID" value=" $return_id">
    <label  style="color: red; font-size: 12px; margin-right: 20px;display: contents;">** 6 Digit ST Employee ID / 9 SecurityID **</label>
    </p>
            </div>
            <div ></div>

Below is Javascript.

var secuid = document.translot.secuid.value;
    if (secuid == null || secuid == ""){
        alert("Please Insert the ID.")
        return false;
    }

CodePudding user response：

Use maxlength in your input tag, it will restrict user to enter the digits to your provided length.

CodePudding user response：

Use the pattern attribute and this regex:

\b\d{6}\b|\b\d{9}\b
/* Start with a non-word character then 6 consecutive digits then 
another non-word character OR start with a non-word character then 
9 consecutive digits then another non-word character */

type="number" ignores pattern attribute believe it or not, so use type="tel"

In the example test it by observing the warning messages it gives as will as the invalid error message when attempting to send anything not within the criteria.

<form>
<input type='tel' pattern='\b\d{6}\b|\b\d{9}\b' required>
<button>TEST</button>
</form>