Jquery

Question

我正在尝试在表单中创建必填字段。仅当未选中复选框时才需要强制检查。我的问题是

表格已加载
点击保存按钮
点击验证检查并显示错误消息
选中“复选框”后，文本字段将被禁用。但验证错误信息仍然出现

我希望选中复选框时该特定字段的验证错误消失。这是我的代码。

    <tr><td>
      <label for="Name">Employer's Name : </label>
      <span class="error"> * </span></td> 
        <td>input type="text" id="Name"  name="Name" value="" maxlength="66" size="30" /></td>
    </tr>
    <tr>
       <td>
       <input type='checkbox' id="C4" name='C4' value='' onClick='javascript:click()' />
       <label for="C4">Please check</label>
     </td>
    </tr>

   function click() {
var checked = $("input[name='C4']").is(':checked');
if ( checked == true){
      $("input[name='Name']").prop("disabled", true);
      $("input[name='Name']").valid();
    }       
else
{     $("input[name='Name']").prop("disabled", false);
     } }

    $('form[name="question"]').validate({
     success: function(error) {  // change CSS on your element(s) back to normal
     error.removeClass("error");
        },
     rules: {
           Name: {   
                        required: "#C4:unchecked" }
            }

        , submitHandler: function(form) {
        if(validate()){
            form.submit();
            }
          }
      }

Answer 1

如果您添加一些 class 来禁用给定的技巧。

    validator.resetForm();
    var checked = $("input[name='C4']").is(':checked');
    if ( checked == true){
          $("input[name='Name']").prop("disabled", true);
          $("input[name='Name']").addClass("dis");
          $("input[name='Name']").valid();
        }       
    else
    {     $("input[name='Name']").prop("disabled", false);
          $("input[name='Name']").removeClass("dis");
    }

根据规则：

ignore: ".dis, :hidden",
Name: {
    required: "#C4:unchecked" ,
}

Answer 2

您的代码中存在大量问题...

$('form[name="question"]').validate({
    success: function(error) { 
        error.removeClass("error");  // <- no, no, no!!
    },
    rules: {
        Name: {   
            required: "#C4:unchecked"  // should be true, false, or a function
        }
    }, 
    submitHandler: function(form) {
        if(validate()){    // <- invalid syntax and NOT needed here
            form.submit(); // <- DEFAULT behavior
        }
    }
} // <- missing closing );

error.removeClass("error") 只会从错误消息标签中删除 class 而不会删除其他内容。无论如何，您不需要删除 success 函数中的 error class，因为这是由插件自动完成的。如果您想覆盖 classes 的应用方式，您只需使用 hightlight 和 unhighlight 回调。 success 回调仅在您想要在字段有效时显示错误消息标签时使用...例如绿色复选标记。
required 规则只接受 true、false 或函数，从不接受 jQuery 选择器。在您的情况下，您编写了一个函数来检查复选框是否被选中，并根据该条件 returns true 或 false...
```
rules: {
    Name: {
        required: function() {
            return !$('#C4').is(':checked');
        }
    }
},
```
在您的 submitHandler 中，if (validate()) 在两个方面是无稽之谈。第一，您不需要在此处测试有效性，因为 submitHandler 仅在表单有效时才会触发。第二，validate() 没有意义……它不是有效的参数、关键字、函数或方法。
您在方法末尾的大括号后缺少结束符 );。 .validate({...});

在您的 table 中，您缺少此元素的左括号 <：

input type="text" id="Name"  name="Name" value="" maxlength="66" size="30" />

您不需要 onClick='javascript:click()'，只要使用 jQuery click 处理程序函数即可。

$('#C4').on('click', function() {
    var nameField = $('#Name');
    if ($(this).is(':checked')) {
        nameField.prop("disabled", true);
    } else {
        nameField.prop("disabled", false);
    }
    nameField.valid();
});

如果此函数中的唯一行是 form.submit()，则不需要 submitHandler。这是默认行为，因此您可以删除整个内容。

工作版本：

$('form[name="question"]').validate({
    rules: {
        Name: {
            required: function() {
                return !$('#C4').is(':checked');
            }
        }
    }
});

$('#C4').on('click', function() {
    if ($(this).is(':checked')) {
        $('#Name').prop("disabled", true);
    } else {
        $('#Name').prop("disabled", false);
    }
    $('#Name').valid();
});

演示：jsfiddle.net/7L2rm0gu/

Jquery - 禁用该字段后验证错误消息不适用

Jquery - Validation error message doesn't go for after the field is disabled

jquery-validate