提交前确保输入字段具有值

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!

Answer 1

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.

Answer 2

您可以使用值的长度

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

Answer 3

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

Answer 4

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!!!

Answer 5

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>

Answer 6

Problem

In your example code, I can see several problems.

1. 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 .
2. 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.

Answer 7

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