I am very new to the UI part, i have one form which contains input type as number that field should accept only 10 digits only once the condition match i want to enable the submit button can you please help me did i miss anything ?
$(document).ready(function() {
$('#pnum').on('keypress', function(e) {
var $this = $(this);
var regex = new RegExp("^[0-9\b]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
// for 10 digit number only
if ($this.val().length > 9) {
e.preventDefault();
return false;
}
if (e.charCode < 54 && e.charCode > 47) {
if ($this.val().length == 0) {
e.preventDefault();
return false;
} else {
return true;
}
}
if (regex.test(str)) {
$('#submitButton').prop('disabled', false);
return true;
}
e.preventDefault();
return false;
});
});<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="exampleInputEmail3">Phone Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">+ 91</span>
</div>
<input type="number" class="form-control" id="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
</div>
</div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="exampleInputEmail3">Phone Number</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">+ 91</span>
</div>
<input type="number" class="form-control" id="pnum" name="phone_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" maxlength="10" required>
</div>
</div>
<input type="submit" name="submit" disabled id="submitButton" value="Submit" class="btn btn-primary mr-2">
<script>
$(document).ready(function() {
$('#pnum').on('keypress', function(e) {
const value = e.target.value
var $this = $(this);
var regex = new RegExp("[0-9]{9}");
// for 10 digit number only
if (value.length > 9) {
e.preventDefault();
return false;
}
if (regex.test(value)) {
$('#submitButton').prop('disabled', false);
return true;
}
});
});
</script>for disable and enable based on string length if its 10 than
$(document).ready(function() {
$('#submitButton').prop('disabled', true);
$('#pnum').on('keypress', function(e) {
var $this = $(this);
if ($this.val().length == 10) {
$('#submitButton').prop('disabled', false);
}else{
$('#submitButton').prop('disabled', true);
}
});
});