Question

我在验证下面的表格时遇到问题主要问题是我必须使用“onfocusout”功能来验证输入根据无线电选择，需要输入名称选择“value3”时，焦点将设置为输入在输入时，如果用户尝试更改单选按钮，则会在更改无线电值之前触发onfocusout，并且在这种情况下会显示错误，而不应显示错误有什么建议吗？

<form id="myform">    

  <input type="radio" name="radio" value="value1" /> value1
  <input type="radio" name="radio" value="value2" /> value2
  <input type="radio" name="radio" value="value3" /> value3

  <input type="text" name="name" />

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

js代码是：

$("#myform").validate({
    rules: {
        name: {
            required: {
                depends: function () {
                    return $("input[name='radio']:checked").val() == "value3";
                }
            }
        }
    },
    messages: {
        name: {
            required: "You must enter name"
        }
    },
    onfocusout: function (element) {
        this.element(element);
    },
    submitHandler: function (form) {
        alert('success');
        return false;
    }
});

$("input[name='radio']").change(function () {
    var value = $(this).val();
    if (value == "value3") $("input[name='name']").focus();
    else $("input[name='name']").valid();
});

JSFiddle：http://jsfiddle.net/954ros6L/

Answer 1

您调用.valid()方法太晚了。每次change单选按钮时，只需调用它，时间就会正确。

$("input[name='radio']").on('change', function () {
    $("input[name='name']").valid();  // <- move it to here
    var value = $(this).val();
    if (value == "value3") {
        $("input[name='name']").focus();
    }
});

另外，如果您注意到，当字段无效时，现在会正确显示验证消息。

您也不需要自定义onfocusout处理程序。

DEMO：http://jsfiddle.net/954ros6L/4/

旁注：

您不能在任何回调函数中使用event.preventDefault()，因为event不是函数的有效参数。此外，.preventDefault() is only meant to block the default action of an event，就像在锚click之后停止页面跳转等...而不是插件的默认行为。

更改onfocusout的默认行为只是意味着你编写了一个函数来覆盖你已经完成的插件的默认行为。

Answer 2

尝试使用以下内容来阻止正常的事件处理程序

event.preventDefault（）;

根据单选按钮阻止验证onfocusout

2 个答案: