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

Question

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>

I would simply use regex. First, get the value of the input as a string. then use regex to remove all spaces and then check if the length is still 0; — tacoshy
– tacoshy, Commented Jul 20, 2022 at 12:10

Peter Pointer · Accepted Answer · 2022-07-20 12:16:17Z

2

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>

answered Jul 20, 2022 at 12:16

Peter Pointer

4,2542 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zakk616 · Accepted Answer · 2022-07-20 12:29:43Z

1

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

answered Jul 20, 2022 at 12:29

zakk616

1,57210 silver badges15 bronze badges

Comments

tacoshy · Accepted Answer · 2022-07-20 12:30:26Z

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>

Demon · Accepted Answer · 2022-07-20 12:27:41Z

0

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

answered Jul 20, 2022 at 12:27

Demon

211 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

trim() your strings

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

trim() your strings

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related