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 class="control-label col-sm-5" for="badgeid" style="margin-left: -50px;">ID:</label>;
<div class="col-sm-4">;
<p class="form-control-static" style="margin-top: -6px;">
<input type="number" class="form-control" id="secuid" name="secuid" min="0" placeholder="Enter ID" value=" $return_id">
<label class="control-label col-sm-6" style="color: red; font-size: 12px; margin-right: 20px;display: contents;">** 6 Digit ST Employee ID / 9 SecurityID **</label>
</p>
</div>
<div class="col-sm-10"></div>
Below is Javascript.
var secuid = document.translot.secuid.value;
if (secuid == null || secuid == ""){
alert("Please Insert the ID.")
return false;
}
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>It is pretty simple - use 'pattern' alongside maxlength.
Way 1:
<html>
<body>
<h1>The input pattern attribute</h1>
<form action="/action_page.php">
<label for="secuid">Enter ID:</label>
<input type="text" id="secuid" name="secuid" pattern="(\d{6}|\d{9})" maxlength="9" title="Enter ID"><br><br>
<input type="submit">
</form>
</body>
</html>
See JSFiddle (1) here
Way 2 use minlength=6, maxlength=9, and allow for only numbers: pattern="[0-9]+
<input type="text" id="secuid" name="secuid" pattern="[0-9]+" minlength="6" maxlength="9" title="Enter ID">
See JSFiddle (2) here
Note: no javascript needed