Question

我有一个带有单选按钮组的表单，该表位于字段集内，带有 data-role = controlgroup 。我正在使用 jQuery Mobile 和jQuery Validate插件来处理表示和表单验证。我遇到的问题是我定义的unhighlight方法没有在单击提交按钮的序列之后调用，导致验证显示错误，然后单击单选按钮。

我的验证设置如下：

$(document).on("pageshow", "#page", function() {

  $(".product_type_form").validate({
      validClass: "data-valid", 
      errorClass: "data_invalid",
      errorElement: "span",                     
      errorPlacement: function(error, element) {
          if ($(element).is("input[type='radio']")) {
              container = $(element).parents('div.ui-controlgroup-controls');
          } else {
              container = $(element).parents('div.ui-input-text');
          }             
          error.insertBefore(container);
    },
    highlight: function(element, errorClass, validClass) {
        if ($(element).is("input[type='radio']")) {
            container = $(element).parents('div.ui-controlgroup-controls');    
        } else {
            container = $(element).parents('div.ui-input-text');
        }
        container.addClass(errorClass);
        container.removeClass(validClass);
    },
    unhighlight: function (element, errorClass, validClass) {
        if ($(element).is("input[type='radio']")) {
            container = $(element).parents('div.ui-controlgroup-controls');    
        } else {
            container = $(element).parents('div.ui-input-text');
        }            
        container.addClass(validClass);
        container.removeClass(errorClass);            
    }         
  });    
});

我查看了Validate的jQuery插件文档并注意到了这一点：

的onclick

类型：布尔值或函数（）

点击后验证复选框和单选按钮。设置为false以禁用。

我理解这意味着它的默认值为true（已启用），那么为什么我的高亮显示方法不会被调用单选按钮onclick事件？

可以看到该页面here。

试图为它设置一个小提琴here，但无法使它工作:(

TIA

Answer 1

出于某种原因，仅当您使用jQuery Mobile时，jQuery Validate插件会忽略radio的click事件。

这是一种解决方法，在单击单选按钮时以编程方式触发验证测试...

$('input[name="product_type"]').on('click', function() {
    $(this).valid();  // triggers a validation test
});

您的演示经过修改：http://jsfiddle.net/QxLMC/18/

Answer 2

通过javascript操作复选框/单选按钮时，＆＃39;刷新＆＃39;需要调用方法以影响样式。示例如下：

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

Answer 3

如果选择任何单选按钮，这个小代码将调用您的方法。

和此关键字指的是您选择的一个单选按钮。

$('[name$="product_type"]:checked').each(function()
{
   yourmethod(this);
});

单击单选按钮时，jquery验证不会取消强调

3 个答案: