CODEWITHSUNDEEP
javascripthtmljquerydisable
Tushar Arora
Tushar Arora

Reputation: 103

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

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>

Upvotes: 0

Views: 4120

Answers (4)

tacoshy
tacoshy

Reputation: 13002

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>

Upvotes: 1

zakk616
zakk616

Reputation: 1542

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

Upvotes: 1

Demon
Demon

Reputation: 21

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 }).

Upvotes: 0

Peter Pointer
Peter Pointer

Reputation: 4162

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>

Upvotes: 2

Related Questions