Question

基本上，代码用于检查在提交表单之前是否输入了“必填表格输入”。

通过执行以下操作设置“必需输入”：

requiredInputs(
{
   0 : ['name', 'age', ['phone', 'mobile', 'email']]
});

0表示页面上的表单索引。前两个值name, age是必须输入的文本框才能提交表单。嵌套数组phone, mobile, email是“分组”文本框 - 必须至少输入其中一个输入。如果全部为空，则显示错误。

function requiredInputs(inputArray)
{
   for (var formIndex in inputArray)
   {
      var $form = $('form').eq(formIndex);

      $form.submit(function(element)
      {
         for (var inputIndex in inputArray[formIndex])
         {
            var input = inputArray[formIndex][inputIndex];

            if (typeof (input) == 'string')
            {
               var $input = $form.find('input[name="' + inputArray[formIndex][inputIndex] + '"]');

               if ($input.val() == '')
               {
                  $input.addClass('jsrequired');
                  element.preventDefault();
               }
               else
               {
                  if ($input.hasClass('jsrequired'))
                     $input.removeClass('jsrequired');
               }
            }
            else
            {
               for (var innerIndex in inputArray[formIndex][inputIndex])
               {
                  var input = inputArray[formIndex][inputIndex][innerIndex];

                  if ($input.val() == '')
                     showError = false;
               }

               if (showError)
               {
               }
            }
         }
      });
   }
}

此函数在每个表单和给定输入上获取数组和循环。

typeof（）检查用于检查“单个输入”或“分组输入”。如果是单个，它只是检查该字段是否为空白，如果是，则给它一个红色边框并阻止表单提交。

这部分工作正常......

问题在于嵌套的“分组项目”。我想不出循环遍历这些字段的方法，检查它们是否为空，如果所有字段都显示错误。

我的想法是遍历分组字段，如果找到一个空字段则设置一个布尔值false，然后重新遍历每个字段以设置'jsrequired'类并阻止表单提交。但是，当我写这篇文章时，我意识到它不会做我想要的。如果要查找一个空字段，它将在所有分组项上设置错误类。如果找到所有空字段，则不设置错误类...

有什么想法吗？：/

Answer 1

当你试图检查innerIndex

中的值时，你可以在循环之前放置一个标志

function requiredInputs(inputArray)
{
   for (var formIndex in inputArray)
   {
      var $form = $('form').eq(formIndex);

      $form.submit(function(element)
      {
         for (var inputIndex in inputArray[formIndex])
         {
            var input = inputArray[formIndex][inputIndex];

            if (typeof (input) == 'string')
            {
               var $input = $form.find('input[name="' + inputArray[formIndex][inputIndex] + '"]');

               if ($input.val() == '')
               {
                  $input.addClass('jsrequired');
                  element.preventDefault();
               }
               else
               {
                  if ($input.hasClass('jsrequired'))
                     $input.removeClass('jsrequired');
               }
            }
            else
            {
               var empty = true; // flag for an empty element
               var groupSelector = $(this).find('.groupTextbox');
               for (var innerIndex in inputArray[formIndex][inputIndex])
               {
                  var input = inputArray[formIndex][inputIndex][innerIndex];

                  if ($input.val() != '')
                      empty = false; // set 1 to false if one has a value
               }

               if (empty) // if nothing has a value it should 
                   element.preventDefault(); // stop and show error
                   $(groupSelector).find('input').addClass('jsrequired');
               }
            }
         }
      });
   }
}

逻辑听起来......

ADD

你必须用一个类为groupTextbox

的div包装你的组输入

需要一些关于使我的Javascript代码更高效和功能的输入

1 个答案:

ADD