jQueryValidate - 检查是否需要控件而不触发验证

Question

我试图显示所需控件的星号。代码在所需的类中运行良好但现在我有两个字段，公司和名称。根据其他元素值，只需要其中一个。是否可以在不验证控件或表格的情况下检查是否需要输入？

示例html结构：

<div class="form-group">
    <label class="control-label" for="CompanyName">Company Name</label>
    <div>
        <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
    </div>
</div>

JS：

validationOptions: {
    ignore: ":disabled,:hidden",

    rules: {
        CompanyName: {
            required: function () {
                return ($("#ContactName").val().length === 0);
            }
        },
        ContactName: {
            required: function () {
                return ($("#CompanyName").val().length === 0);
            }
        }
    },

    onkeyup: function (element) {
        const $parent = $(element).parents(".form-group");

        if ($(element).valid()) {
            $parent.removeClass("invalid");
        } else {
            $parent.addClass("invalid");
        }
    },

    onfocusout: function () {
        if ($("form").valid()) {
            $("form.error").removeClass("error");
            $("form .invalid").removeClass("invalid");
        }
    },

    errorPlacement: function (error, element) {
        const $parent = $(element).parents(".form-group");

        if ($(element).hasClass("error")) {
            $parent.addClass("invalid");
        } else {
            $parent.removeClass("invalid");
        }
    },

    invalidHandler: function (event, validator) {
        $.each(validator.successList, function (index, item) {
            $(item).parents(".form-group").removeClass("invalid");
        });
        const errors = validator.numberOfInvalids();
        if (errors) {
            $.each(validator.errorList, function (index, item) {
                $(item.element).parents(".form-group").addClass("invalid");
            });
        }
    }
}

当然，我可以将我的代码放在上面要求的回调中，但这不是一般的解决方案。

我希望能够多次调用以下函数，根据所需的字段状态更新表单上的（引导程序）星号。

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control.required");

    $controls.each(function () {
        const $label = $(this).parents(".form-group").find(">.control-label");

        $label.html($label.html() + " <span class='text-danger'>*</span>");
    });
},

尝试完成类似的事情：

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control");

    $controls.each(function () {
        if ($(this).isRequired()) {
            const $label = $(this).parents(".form-group").find(">.control-label");

            $label.html($label.html() + " <span class='text-danger'>*</span>");
        }
    });
},

Answer 1

  

是否可以在不验证控件或表单的情况下检查是否需要输入？

没有方法作为jQuery Validate插件的一部分，它将返回已声明，已定义或已分配规则的列表。 （您可以查看settings.rules对象内部的值，但这不是动态的或全面的）

但是，插件中内置了一个名为.check()的未记录方法，它将检查有效性而不会触发任何错误消息。它不仅限于required规则，只是有效性。实际上，只有在字段为空时才查找required规则。

换句话说，在空白表单上，此方法始终判断该字段是否为required而不触发消息。

您必须将它附加到验证器对象，并且参数必须是DOM元素。

$('#myform').validate().check($('[name="test3"]')[0]) // <-- returns a boolean if defined

OR

var validator = $('#myform').validate({...}); // initialize plugin with options

validator.check($('[name="test3"]')[0]) // <-- returns a boolean if defined

DEMO：jsfiddle.net/we2johru/2/

请注意，此方法仅在定义规则时返回布尔值。如果没有已定义的规则，此方法将返回undefined。

Answer 2

下面的代码示例应该为您提供帮助。

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control");

    $controls.each(function () {
        // if ($(this).isRequired()) {
        if ($(this).rules().required) {
            const $label = $(this).parents(".form-group").find(">.control-label");

            $label.html($label.html() + " <span class='text-danger'>*</span>");
        }
    });
},

如果你没有在每个元素上使用.form-control类，那么你可以从插件的.elements（）方法中获取elements数组，并通过检查它们的.rules（）方法来循环它们。

const elements = $("#signupform").validate().elements();
for (let i=0; i<elements.length; i++) {
    const $el = $(elements[i]);
    if ($el.rules().required) {
        $el.parents(".form-group").find(">.control-label").append(" <span class='text-danger'>*</span>");
    }
}

修改

JSBin Demo已添加。

Answer 3

根据jQuery Validation Plugin的示例，您可以修改规则，如下例所示，以解决您的问题。

 rules: {
    CompanyName: {
      required: {
        depends: function(element) {
          return $("#ContactName").val().length === 0;
        }
      }
    },
    ContactName: {
      required: {
        depends: function(element) {
          return $("#CompanyName").val().length === 0;
        }
      }
    }
  }

或

 rules: {
    CompanyName: {
      required: {
        depends: function(element) {
          if($("#ContactName").val().length === 0) {
              $("#ContactName").removeClass("required");
              return true;
          } else {
              return false;
          }             
        }
      }
    },
    ContactName: {
      required: {
        depends: function(element) {
          if($("#CompanyName").val().length === 0) {
              $("#CompanyName").removeClass("required");
              return true;
          } else {
              return false;
          }
        }
      }
    }
  }

<强>最后

  

另一种方法是使用分组。

<div class="form-group">
    <label class="control-label" for="CompanyName">Company Name</label>
    <div>
        <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
    </div>
</div>
<div class="form-group">
    <label class="control-label" for="ContactName">Contact Name</label>
    <div>
        <input type="text" id="ContactName" name="ContactName" class="form-control required">
    </div>
</div>
  // Use require_from_group to ensure at least one of the fields is complete
  rules: {
    ContactName: {
      require_from_group: [1, ".required"]
    },
    CompanyName: {
      require_from_group: [1, ".required"]
    }
  }

Answer 4

据我所知，你的每个输入元素都有form-control类，而required类只适用于所选元素。基于此，下面是一个片段，它仅将星号分配给那些required作为类的人。

<强>逻辑： 循环使用form-control类的元素，并使用hasClass()进行检查，如果它们也有required类。如果是，请将危险星号附加到其上。

$(".form-control").each(function() {
  var requiredHtml = "<span class='text-danger'>*</span>";
  if ($(this).hasClass('required')) {
    $(this).closest('.form-group').find('label').append(requiredHtml);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label" for="CompanyName">Company Name</label>
  <div>
    <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
  </div>
</div>
<div class="form-group">
  <label class="control-label" for="designation">Designation</label>
  <div>
    <input type="text" id="designation" name="designation" class="form-control">
  </div>
</div>