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：检查是否填充了所有表单字段

1 个答案: