I'm trying to create a passport validation that depends on its format, I created 2 input bar. The first input bar that only allows user to input 2 letters only and the second input bar only allows to input 7 number. What javascript function to validate user input 2 letters only not numbers and to input 7 numbers only not letters on its respected input bars
Here is what I have so far
<!doctype html>
<html>
<body>
<div class="form-group">
<label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label>
<input size="1" name="passportno" class="form-control" placeholder=""required/> -
<input size="14" name="passportno" class="form-control" placeholder=""required/>
</div>
</script>
</body>
</html>I'm trying to create a passport validation that depends on its format, I created 2 input bar. The first input bar that only allows user to input 2 letters only and the second input bar only allows to input 7 number. What javascript function to validate user input 2 letters only not numbers and to input 7 numbers only not letters on its respected input bars
Here is what I have so far
<!doctype html>
<html>
<body>
<div class="form-group">
<label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label>
<input size="1" name="passportno" class="form-control" placeholder=""required/> -
<input size="14" name="passportno" class="form-control" placeholder=""required/>
</div>
</script>
</body>
</html>- 2 Do you have a specific question? – CollinD Commented Sep 27, 2015 at 7:43
- @arthur also validates inputting the number/letter only – Vista Commented Sep 27, 2015 at 7:56
3 Answers
Reset to default 2Below code shows alert whether the input is valid input or not. If not then alert shows false. Replace alert with your code for showing message or something else.
Use maxlength attribute of html for maximum input characters
$(document).ready(function(){
$("#submitButton").click(function(){
alert(/^\d+$/.test($('#passportNumber').val())); // 2 digit number validation
alert(/^[a-zA-Z]+$/.test($('#passportSeries').val())); // 7 character validation
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<div class="form-group">
<label for="passportno" class="control-label col-xs-4">
<p class="left">Passport No.</p>
</label>
<input maxlength="2" id="passportNumber" class="form-control" placeholder=""required/> -
<input maxlength="7" id="passportSeries" class="form-control" placeholder=""required/>
<input type="button" value="submit" id="submitButton" />
</div>
</script>
</body>
</html>Following is one of the may ways.
- Set maxlength to your input
- Have unique names to your inputs (not the same)
- Since I don't see a button to validate, I've used keyup, input (deals with copy+paste etc.)
$("input").on("keyup input", function() {
var $this = $(this);
var val = $.trim( $this.val() ) || "";
if (this["name"] === "passportno") {
val = val.replace(/[^\d]/g, '');
} else {
val = val.replace(/[^a-z]/gi, '');
}
$this.val( val );
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label>
<input size="1" name="passportno" class="form-control" placeholder="" required="" maxlength="2" /> -
<input size="14" name="passportletters" class="form-control" placeholder="" required="" maxlength="7" />
</div>I haven't tested but I think Sarjan Desai's answer accepts 1 to 2 letters and 1 to 7 numbers. You can specify to match a length in both regexp:
/^\d+$/ would be /^\d{2}$/ and /^\[a-zA-Z]+$/ would be /^\[a-zA-Z]{7}$/
Modified code:
$(document).ready(function(){
$("#submitButton").click(function(){
alert(/^\d{2}$/.test($('#passportNumber').val()));
alert(/^[a-zA-Z]{7}$/.test($('#passportSeries').val()));
});
});