jquery验证即时更改字段验证

时间:2010-10-11 14:46:49

标签: jquery validation

我正在使用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并单击“提交” 他收到错误“请输入数字。”这是正确的

之后将验证更改为float。

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

因此有什么方法可以更改选择框值以某种方式重新验证表单或仅重新验证特定的nextFiled以删除错误

由于

1 个答案:

答案 0 :(得分:0)

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

所以,试着改变:

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

要:

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