Question

Validation Plugin验证了一个问题表单。它有很多带有复选框和单选按钮的字段，我希望在点击带有href =“＃checkbox-id”的链接后对它们进行检查。

...
<label class="answer-label" for="answer-2">
  <input id="option-2.1" class="answer" type="radio" name="answer-2" value="Yes"/>
  <a href="#option-2.1">Yes</a>
</label>
...

使用Javascript：

$("label.answer-label a").bind("click", function(event) {
  event.preventDefault();
  var target = $(this).attr("href").replace(".", "\\.");
  $(target).click();
} );

这是验证插件设置：

$("form#feedback")
    .validate({ submitHandler : function ( form ) {
                form.submit();
              },
              errorClass: "invalid",
              focusInvalid : false,
              debug : true,
              invalidHandler : function ( form, validator ) {
                  var destination = validator.errorList[0].element;

                  $("html, body").animate({ scrollTop : $(destination).offset().top - 100 });
                  $(destination).focus();
              },
              highlight : function ( element, errorClass, validClass ) {
                  if ( $(element).parents(".name-company") ) {
                      $(element)
                          .removeClass(validClass)
                          .addClass(errorClass);
                  }
                  // if ( $(element).parents(".question") ) {
                  $(element)
                      .parents(".question")
                      .removeClass(validClass)
                      .addClass(errorClass);
                  // }
              },
              unhighlight : function ( element, errorClass, validClass ) {
                  if ( $(element).parents(".name-company") ) {
                      $(element)
                          .removeClass(errorClass)
                          .addClass(validClass);
                  }
                  // if ( $(element).parents(".question") ) {
                  $(element)
                      .parents(".question")
                      .removeClass(errorClass)
                      .addClass(validClass);
                  // }  
              },
              errorPlacement : function () {
                  return false;
              }
            });

问题是：点击标签检查输入元素，但验证事件仅在第二次点击后触发。

Answer 1

如果锚标记始终在输入之后，则不需要输入的ID。试试这个：

$("label.answer-label a").bind("click", function(event) {
  event.preventDefault();
  $(this).prev().click().blur(); // or change
});

此外，.bind在较新版本的jquery中折旧。如果您使用的是jQuery 1.7+，请使用：

$("label.answer-label a").on("click", function(event) {
  event.preventDefault();
  $(this).prev().click().blur(); // or change
});

并且，如果元素是动态的，则需要使用事件委派。

$(document).on("click", "label.answer-label a",function(event) {
  event.preventDefault();
  $(this).prev().click().blur(); // or change
});

要触发验证，我在点击后添加了.blur()。根据您的验证代码，可能需要将其更改为.change（）。

如果删除.click()，它是否仍然有同样的反应？ .click()确实不应该导致无线电的价值发生变化。

Answer 2

我找到了一种解决方法（或者，可能是触发验证事件的正确方法）！诀窍是在复选框和单选按钮上绑定“更改”事件，如下所示：

    $("#feedback input[type=radio], #feedback input[type=checkbox]" )
      .bind("change", function ( event ) {
              $("#feedback").validate().element($(this));
          } );

此绑定必须在任何其他“更改”事件绑定之前设置，以便每个“更改”事件都会触发验证检查。

元素对jQuery事件没有反应

2 个答案: