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

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>

CodePudding user response：

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>

CodePudding user response：

First of all disable the button by default to prevent showing button as able to click on first visit at page <button id="edit-submit" disabled>Submit</button>

After that check whether the user entered any input in input field or not. If input field is empty or contains only white spaces then

$('#edit-submit').prop('disabled', true);

else you can enable the button

$('#edit-submit').prop('disabled', false);

you can also use the trim() to remove white spaces

And also if you want to prevent the button disabled by default, you can check the input field value on page load using $(document).ready(function () { // code to check the inpul field is empty or not on page load }).

CodePudding user response：

$("#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>

CodePudding user response：

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>