Disable submit button if input field is blank or user enter empty spaces

July 20, 2022

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>

>Solution :

trim() your strings

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>