Reputation: 59
I have an input box and it should only allow float values within the range of -90 to 90. Make the Send button unclickable when the value is not within the allowed range. And display a text when trying to click the button saying the input is invalid.
For now I could limit the input using keycode, even though this only allows to enter numbers and one single decimal point and negative sign, it will let you put the sign anywhere. Here's a demo
$('#inputLat').keypress(function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if (!(
(code >= 48 && code <= 57) //numbers
|| (code >= 45 && code <= 46) //period
)
|| (code == 46 && $(this).val().indexOf('.') != -1)
|| (code == 45 && $(this).val().indexOf('-') != -1)
)
event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="inputLat">Latitude</label>
<br>
<input type="text" id="inputLat" placeholder="-90° to +90°">
<br>
<button type="button" id="sendButton">Send</button>
I expect the sign to be at the beginning only.
Upvotes: 0
Views: 122
Reputation: 51944
perhaps bind to the input event and perform your numerical validation there:
$('#inputLat').on('input', function() {
var num = parseFloat($(this).val());
if (num >= -90 && num <= 90) {
// Input is valid
console.log('Valid');
$('#inputLatLabel').removeClass('error');
$('#sendButton').prop('disabled', false);
} else {
// Input is invalid
console.log('Invalid');
$('#inputLatLabel').addClass('error');
$('#sendButton').prop('disabled', true);
}
});
.error {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="inputLatLabel" for="inputLat">Latitude</label>
<br>
<input type="text" id="inputLat" placeholder="-90° to +90°">
<br>
<button type="button" id="sendButton" disabled>Send</button>
Upvotes: 0
Reputation: 3356
You could user <input type="range">
, if you don't mind a slider in browsers that support it. Rolls back to a text input if browser doesn't, and would probably need custom validation.
<div>
<input type="range" id="start" name="volume"
min="-90" max="90">
<label for="volume">Volume</label>
</div>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
Or you could use <input type="number">
<input type="number" min="-90" max="90">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
Upvotes: 1