Make sure an input field has a value before submit

Question

I want to make sure that the input has value before submit but when I use "" or 'null', it, null will not disable it and "" will keep it disabled no matter what. Here is my code:

var prevScrollpos = window.pageYOffset;
$(window).scroll(function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    $("#container").fadeIn();
  } else {
    $("#container").fadeOut();
  }
  prevScrollpos = currentScrollPos;

});
if (document.getElementById("m").value === null) {
  document.getElementById("send").disabled = true;
} else if (document.getElementById("m").value !== null) {
  document.getElementById("send").disabled = false;
} else {
  $(function() {
    var socket = io();
    $('form').submit(function() {
      socket.emit('chat message', $('#m').val());
      $("#m").val("");
      return false;
    });
    socket.on('chat message', function(msg) {
      $('#messages').append($('<li>').text(msg));

    });
  });
}

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<div id="msgs">
  <ul id="messages"></ul>
</div>
<form action="">
  <div id="container">
    <input id="m" autocomplete="off" /><button id="send">Send</button>
  </div>
</form>

thanks!

You can also try this way https://stackoverflow.com/questions/16125255/how-i-know-if-my-input-type-file-has-content-selected — Tarun, Oct 05 '18 at 13:10
You can also try it this way [Refer to this Post on stackoverflow](https://stackoverflow.com/questions/3279628/checking-the-form-field-values-before-submitting-that-page) — Tarun, Oct 05 '18 at 13:13
In case you are looking for customised validations on your page Please refer https://stackoverflow.com/questions/19839952/all-falsey-values-in-javascript This enables you to check for all the falsey values instead of a lengthy `if` statement. — Nagama Inamdar, Oct 05 '18 at 13:17

score 4 · Answer 1 · answered Oct 05 '18 at 13:09

You might consider using the new required attribute in HTML5:

<input id="m" autocomplete="off" required/>

For more information: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute

This answer is just like an alternative technique for form data validation, cuz we have many ways to implement form data validation, from basic to advance.

score 1 · Answer 2 · answered Oct 05 '18 at 13:12

1

You can use length of value

if (document.getElementById("m").value.length>0) concole.log('input not empty');

answered Oct 05 '18 at 13:12

Evgeniy Belov

358
1
7

score 1 · Answer 3 · answered Oct 05 '18 at 13:13

Im not Jquery expert and I can't understand why would you use it anyway but your problem is you don't have event listener to the elements you changing. It means - Javascript remember the values you had in your elements on run time, later when you change it , it cant read the new values without proper listener. Therefor , "" will keep it disabled. read https://api.jquery.com/change/ about the change listener of Jquery

score 1 · Answer 4 · answered Oct 05 '18 at 13:16

I don't think required is a good way since I can easily disable it by just taking a look at the html code.

So what you should do instead is add an event listener. Each time your user types something you check if the input is empty or not. If it is you disable the button, if it isn't you activate the button.

And also: Always check in the backend aswell!!!

score 1 · Answer 5 · answered Oct 05 '18 at 13:25

please use if (document.getElementById("m").value == '') instead of yours

 <div id="msgs">
                    <ul id="messages"></ul>
                </div>
                <form action="">
                    <div id="container">
                        <input id="m" autocomplete="off" /><button id="send">Send</button>
                    </div>
                </form>
            </body>
            <script src="/socket.io/socket.io.js"></script>
            <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
            <script>

                var prevScrollpos = window.pageYOffset;
                $(window).scroll(function () {
                    var currentScrollPos = window.pageYOffset;
                    if (prevScrollpos > currentScrollPos) {
                        $("#container").fadeIn();
                    } else {
                        $("#container").fadeOut();
                    }
                    prevScrollpos = currentScrollPos;

                });
    runcheck();  
    $("#m").keyup(function(){
    runcheck();
    });





    function runcheck(){
    if (document.getElementById("m").value == '') {
                    document.getElementById("send").disabled = true;
                }
                else if (document.getElementById("m").value != null) {
                    document.getElementById("send").disabled = false;
                }  else {
                    $(function () {
                        var socket = io();
                        $('form').submit(function () {
                            socket.emit('chat message', $('#m').val());
                            $("#m").val("");
                            return false;
                        });
    socket.on('chat message', function (msg) {
                    $('#messages').append($('<li>').text(msg));

                });

                    });
                }
    }


            </script>

chitzui · Answer 6 · 2018-10-10T10:30:04.863

Problem

In your example code, I can see several problems.

It does not seem as if you have a listener for changes on the imput
- you’ll need to add an event listener on your html element to know if there is any change. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener then based on the event you get you can check for the value using event.target.value.
Your value checking is wrong
- You can check if fields have values by doing just if(document.getElementById("m").value) no need for === null.

Solution

Just use the required attribute on your html element. That will add basic html form validation and prevent submission when the input is empty. As long as it is in a form element. See MDN Docs on required attribute for more info.

<input id="m" autocomplete="off" required/>

Then to toggle the disabled status you could check for the validity in JavaScript. Here is an untested pseudocode:

const sendButton = document.querySelector('#send');  // grab the button
const mInput = document.querySelector('#m');  // grab the input

sendButton.disabled = true;  // disable it by default

mInput.addEventListener('change', event => {  // as soon as the input value changes
  sendButton.disabled = !event.target.checkValidity();  // set the disabled state based on the validity of the input field (event.target is the input field) (the little exclamation mark before the validity check means "not". !true === false and !false === true
});

Note that in most browsers the change listener only triggers when the focus changed to another element. So you might want to check on keyup or something like that. Check out the events here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener (on the left side menu under "events")

PS: Generally. Looking at your code. I would advise taking some absolute beginner courses on web development, in particular, html+css+javascript. I guess codecademy is a good place to start.

J.vee · Answer 7 · 2018-10-05T13:28:10.103

0

required is not a good solution because you can just turn it of in browser console I recommend:

if (document.getElementById("m").value == '') { //code here... }

You can check this LINK for more info

I hope this will help you

edited Oct 05 '18 at 13:28

answered Oct 05 '18 at 13:17

J.vee

623
1
7
26

1

You can also turn Javascript off :) – David Lavender Oct 05 '18 at 13:22
@DavidLavender how can you turn off javascript for every user? – J.vee Oct 05 '18 at 13:24

Make sure an input field has a value before submit

7 Answers7

Problem

Solution