I want to disable my submit button if the user enters empty spaces in the input field. I don't want an empty input field with just spaces showing submit button enabled.
$("#edit-title-input").on("keyup", stateHandle);
function stateHandle(e) {
// console.log({a:$("#title").text(),b:e.target.value});
if ($("#title").text() == e.target.value || input.value.length == 0) {
$('#edit-submit').prop('disabled', true);
} else {
$('#edit-submit').prop('disabled', false);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="edit-title-input"><br>
<button id="edit-submit">Submit</button>You can call trim() on a string to remove empty space before and after.
See snippet with the modified code:
$("#edit-title-input").on("keyup", stateHandle);
function stateHandle(e) {
console.log('input value vs. input value.trim()', '"' + e.target.value + '"', '"' + e.target.value.trim() + '"');
if ($("#title").text() == e.target.value || e.target.value.trim().length == 0) {
$('#edit-submit').prop('disabled', true);
} else {
$('#edit-submit').prop('disabled', false);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="edit-title-input"><br>
<button id="edit-submit">Submit</button>$("#input1").on("keyup", function(e) {
if (e.target.value.replace(/\s/g, '').length == 0 ) {
$('#submit').prop('disabled', true);
} else {
$('#submit').prop('disabled', false);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1"><br>
<button id="submit">Submit</button>One way would be to use regex to remove spaces. then check if the value of that string is still 0 or not. By default you should disable the button. disabled is an empty attribute that has no value. So switching it from true to false has no effect as the attribute is still present.
$('#edit-title-input').on('keyup', stateHandle);
function stateHandle(e) {
var text = $('#edit-title-input').val();
var regex = text.replace(/ /g,'');
if (regex.length == 0) {
$('#edit-submit').attr('disabled', true);
} else {
$('#edit-submit').removeAttr('disabled');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="edit-title-input"><br>
<button id="edit-submit" disabled>Submit</button>