Question

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

表单已加载
点击保存按钮
点击验证检查并显示错误消息
选中＆＃34;复选框＆＃34;时，文本字段被禁用。但仍出现验证错误消息

当复选框被选中时，我希望验证错误在该特定字段中消失。这是我的代码。请帮忙！

    <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

如果你在禁用给定技巧中添加一些类。

    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")只会从错误消息标签中删除该类，而不会删除其他内容。无论如何，您不需要删除error函数中的success类，因为这是由插件自动完成的。如果您想要覆盖应用类的方式，则只能使用hightlight和unhighlight回调。只有当字段有效时才显示错误消息标签，才会使用success回调...就像绿色复选标记一样。
required规则只需要true，false或函数，而不是jQuery选择器。在您的情况下，您编写了一个函数，用于检查是否勾选了复选框，并根据该条件返回true或false ...
```
rules: {
    Name: {
        required: function() {
            return !$('#C4').is(':checked');
        }
    }
},
```
在submitHandler if (validate())中，submitHandler在两个方面都是无稽之谈。一，您不需要在此测试有效性，因为validate()仅在表单有效时才会触发。两个，);没有意义......它不是一个有效的参数，关键字，函数或方法。
您在方法结束时的大括号后面错过了结束.validate({...});。 <
在您的表格中，您缺少此元素的左括号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(); });。
```
submitHandler
```
如果此功能中的唯一一行是form.submit()，则不需要$('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(); });。这是默认行为，因此您可以删除整个内容。

工作版本：

{{1}}

DEMO ：jsfiddle.net/7L2rm0gu/

Jquery - 禁用字段后，验证错误消息不会发生

2 个答案: