在提交之前确保输入字段有值

Question

我想在提交之前确保输入具有值，但是当我使用“”或“null”时，null 不会禁用它，“”无论如何都会保持禁用它。 这是我的代码：

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>

谢谢！

Answer 1

您可以考虑在 HTML5 中使用新的 required 属性：

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

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#The_required_attribute

这个答案就像表单数据验证的一种替代技术，因为我们有很多方法可以实现表单数据验证，从基本到高级。

Answer 2

你可以使用值的长度

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

Answer 3

我不是 Jquery 专家，我不明白你为什么要使用它，但你的问题是你没有事件监听器来监听你改变的元素。这意味着 - Javascript 会记住您在运行时元素中的值，稍后当您更改它时，如果没有适当的侦听器，它就无法读取新值。因此，"" 将使其保持禁用状态。阅读https://api.jquery.com/change/ 了解Jquery 的change 监听器

Answer 4

我认为 required 不是一个好方法，因为我可以通过查看 html 代码轻松禁用它。

所以你应该做的是添加一个事件监听器。每次您的用户键入内容时，您都会检查input 是否为空。如果是你禁用按钮，如果不是你激活按钮。

还有：始终检查后端！！！

Answer 5

请使用 if (document.getElementById("m").value == '') 代替你的

 <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

问题

在您的示例代码中，我可以看到几个问题。

1. 您似乎没有监听器来监听输入的变化
   • 您需要在 html 元素上添加一个事件侦听器，以了解是否有任何更改。请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener，然后根据您获得的事件，您可以使用event.target.value 检查该值。
2. 您的值检查错误
   • 您可以通过 if(document.getElementById("m").value) 来检查字段是否有值，而不需要 === null。

解决方案

只需在您的 html 元素上使用 required 属性。这将添加基本的 html 表单验证并在输入为空时阻止提交。只要它在表单元素中。请参阅MDN Docs on required attribute 了解更多信息。

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

然后要切换禁用状态，您可以检查 JavaScript 中的有效性。这是一个未经测试的伪代码：

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

请注意，在大多数浏览器中，change 侦听器仅在焦点更改为另一个元素时触发。所以你可能想检查keyup 或类似的东西。在此处查看事件：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener（在“事件”下的左侧菜单中）

PS：一般。看着你的代码。我建议参加一些关于 Web 开发的绝对初学者课程，特别是 html+css+javascript。我想 codecademy 是个不错的起点。

Answer 7

required 不是一个好的解决方案，因为您可以在浏览器控制台中将其关闭 我推荐：

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

您可以查看LINK 了解更多信息

希望对你有帮助