jQuery：检查是否填充了所有表单字段

Question

我正在使用 jQuery + CoffeeScript + Pug (+ Bootstrap 4)：

我有一个form，看起来像这样，但有很多（十个或更多）项目，所以单独检查它们很困难：

form(method="post")

  .form-group
    label Title
    input.form-control(name="title" type="text")

  .form-group
    label Description
    textarea.form-control(name="description")

  ...

我想在用户每次输入内容时检查是否所有input 字段都填充。目标是决定#save-按钮应该显示还是隐藏。这个#save-按钮应该只在form完全填充时显示。

我的第一次尝试是：

$(window).on 'keydown', (keydown) ->
  ...

我尝试应用 jQuery 的 each 循环，然后我尝试使用 jQuery 的 .val()-方法。但我没有找到解决办法。也许你可以帮忙。

谢谢。

编辑 2：

formElements = $ 'form input[type="text"], form input[type="number"], form textarea'

formFilled = ->
  filled = true
  formElements.each ->
    if $(this).val().length is 0
      filled = false
  filled

formElements.on 'keyup', (keyup) ->
  keyup.preventDefault()
  if formFilled()
    save.show()
  else
    save.hide()

有人知道咖啡脚本编译器是怎么做的吗？？

Answer 1

首先，不要使用$(window).on('keydown')，因为这会在用户按下某个键时触发，无论他们在屏幕上的哪个位置。您需要缩小范围以形成输入。

如果表单完全是文本字段和文本区域，您可以这样做：

//Function will return a true or false
function formIsComplete() {

    var isComplete = true;

    //For every text input and textarea in the form
    $('form input[type="text"], form textarea').each(function() {
        $t = $(this);
        if ($t.val().length == 0) {
            //Found an empty input
            isComplete = false;
            return false;
        }
    });

    //No empty inputs found
    return isComplete;
}


$(document).ready(function() {

    $saveBtn = $('#save');

    //Add 'keyup' event to all form text inputs and textareas
    $('form input[type="text"], form textarea').on('keyup', function() {
        if (formIsComplete()) {
            //All fields have values
            $saveBtn.show();
        } else {
            //Something was empty
            $saveBtn.hide();
        }
    });
});

注意：我已将事件从keydown 更改为keyup，只是因为keydown 在输入值更改之前触发。这意味着当用户输入第一个字符时，keydown 事件仍会将输入视为空。