Input numbers must be 6 digit numbers or 9 digits numbers

Admin 1
Viewed 183

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;
    }
html javascript
2 Answers

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>

user_28132240

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

user_175417090
Related