jquery验证动态更改字段验证答案

【问题标题】：jquery validation change field validation on the flyjquery验证动态更改字段验证
【发布时间】：2010-10-11 14:46:48
【问题描述】：

我正在使用 jquery 验证并且我有上面的代码

    <script language="javascript">

$(document).ready(function() {


    var validator=$("form#myForm")
        .validate({
            submitHandler: function(form){ 
            alert("Submited");
            },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                  console.log(validator.invalidElements());
                }
              },
            rules: {
                       field1: { required: true }            
                    }
    });    

})

function changeValidation()
{
        var validationType=$("#nextFieldValidation").val();

        console.log("selected validation type is "+validationType);

        switch(validationType)
        {
            case "integer":
                console.log("set INTEGER validation");
                $("#nextField").rules("remove");
                $("#nextField").rules("add", {
                        digits: true
                    });
            break;
            case "float":
                console.log("set FLOAT validation");
                $("#nextField").rules("remove");
                $("#nextField").rules("add", {
                        number: true
                    });
            break;
            default:
                console.log("REMOVE validation");
                $("#nextField").rules("remove");
            break;
        }
}
</script>


<form id="myForm" name="form" action="action.php">
    <div><input type="text" name="field1" id="field1" /></div>

    <div>
        <select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();">
            <option value="">Select next filed validation</option>
            <option value="integer">Integer</option>
            <option value="float">Float</option>
        </select>
    </div>

    <div><input type="text" name="nextField" id="nextField" /></div>

    <div><input type="submit" /></div>

</form>

nextField 验证由一个选择框控制。用户决定 nextField 是整数还是浮点数。

代码运行良好，但我需要添加一些内容以增加用户的可访问性。

这就是问题所在。

场景：

用户填写field1选择整数验证并填写12.8点击提交他收到错误“请仅输入数字”。这是正确的

之后将验证更改为浮动。

这就是问题所在。错误“请仅输入数字”。仍然存在并且有点令人困惑。您必须提交表单才能继续，但是为什么有人在收到错误时单击提交。

那么有什么办法可以在更改选择框值时以某种方式重新验证表单或仅重新验证特定的 nextFiled 以消除错误

谢谢

【问题讨论】：

标签： jquery validation

【解决方案1】：

我建议您更改对“changeValidation()”的调用以发生 onchange，而不是 onclick。当您单击控件以使其获得焦点时，onclick 可能会触发，而不是在您选择其他选项时触发。因此，在运行验证时，它仍然设置为整数。

所以，尝试改变：

<select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();">

收件人：

<select name="nextFieldValidation" id="nextFieldValidation" onchange="changeValidation();">

【讨论】：