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 事件仍会将输入视为空。

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

jQuery: Check If All Form-Fields Are Populated

jquery

coffeescript

twitter-bootstrap