jQuery .each 通过少量文本输入而不是 javascript .find 函数

Question

我想对我的输入文本表单进行验证，除非完成所有输入表单，否则该用户无法进一步操作。我想通过每一个输入，即使第一个完成，用户也需要完成另外 2 个等，但此时我只能通过第一个并且不知道如何遍历每个输入文本.

我的html：

<div class="write-to-us">
                <div class="col-md-12 field">
                    <p>Write to us</p>
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label>Name</label>
                        <input  type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your Name</div>
                    </div> 
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label>Surname</label>
                        <input type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your surname</div>
                </div>
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label">Question</label>
                        <textarea type="text" name="subject" class="my-text-input"></textarea>
                    </div>
                </div>
                <div>
                    <button class="my-button">Check it</button>
                </div>
            </div>

还有我用于迭代的 js 代码：

myFunction: function() {
            var $formField = $('.write-to-us');
            if (!$formField.exists()) {
                return;
            }
            initValidation();
            function initValidation() {
                var errorMsg = $formField.find('.label-error');
                var button = $formField.find('.my-button');
                var input = $formField.find('input');
                var inputContainer = $formField.find('.my-form')
                button.click(function(event) {
                    if(!input.val().trim()) {
                        errorMsg.css('visibility', 'visible');
                        inputContainer.addClass('error');
                        event.preventDefault();
                    }
                });
        },

我猜这个问题出在.find 上，应该是一些 jQuery .each 但我不知道如何更改它。

Answer 1

我会尝试做这样的事情而不是找到。

function initValidation() {
  $('.my-button').click(function(){
    $("input").each(function() {
      var element = $(this);
      if (element.val() == "") {
        element.closest('.label-error').css('visibility', 'visible');
        element.closest('.my-form').addClass('error');
      }
    });
  });
}