jQuery Validation Plugin：当onfocusout，keyup和click时调用errorPlacement函数 [英] jQuery Validation Plugin: Invoke errorPlacement function when onfocusout, keyup and click

问题描述

我正在使用jquery验证插件，并希望使用errorPlacement函数将错误消息添加到字段title属性中，并在字段旁边显示一个<。

当提交表单提交提交按钮时，但是当触发以下任何事件时，这很好用：
- onfocusout
- 点击
- onkeyup

运行验证检查，但会跳过errorPlacement函数，并在字段后添加完整的错误消息，如默认行为。

我正在使用以下代码：

  $（＃send-mail）。validate（{
 debug：true，
 //将此类设置为error-labels以指示有效字段
成功：函数（标签）{
 //将文本设置为记号
 label.html（&＃10004 ;）。addClass（valid）; 
}，
 // errorPlacement必须考虑表布局
 errorPlacement：function（error，element）{
 console.log（errorPlacement called for+ element.attr（name）+field）; 
 //检查空白/成功错误
 if（error.text（）==）
 {
 //删除元素$ b $中的字段标题/错误信息b element.attr（title，）; 
 console.log（error check passed）; 
} 
 else 
 {
 //获取错误消息
 var message = error.text（）; 
 
 //设置为元素标题
 element.attr（title，message）; 
 
 //清除错误html并添加交叉字形
 error.html（&＃10008;）; 
 
 console.log（error check failed：+ message）; 
} 
 //在表单元素之后添加错误标签
 error.insertAfter（element）; 
}，
 ignoreTitle：true，
 errorClass：invalid
}）; 
  

解决方案

你的问题是插件只调用 errorPlacement 为验证的每个元素执行一次函数。 Namly首次创建元素的错误标签时。之后，插件只是重新使用已经存在的标签，并且只是替换内部的html（或者如果元素现在有效，则隐藏错误标签）。这就是为什么你的十字会被删除，并显示实际的错误信息。

只是为了确保插件的流程是清晰的。

1. 元素（没有错误标记）


2. 元素在某些时候被验证
   
3. 插件创建错误标签并调用 errorPlacement 函数


4. 元素cross（标题中的错误消息）元素获得焦点并且您改变了某些元素
   
5. 插件重新验证了元素
   
6. 认为错误标签已被创建（并且放置）


7. 插件只是调用 label.html（message）而不是删除旧标签并读取它

所以你看到你的问题是一种优化，插件可以节省一些不必要的插入/删除错误标签。这也是有道理的。

你可以通过查看validation-plugin-sourcecode来查看我说的内容。

jquery.validate.js v1.6 检入功能


$ b A p可能的解决方案可能是额外提供一个自定义的 showErrors 回调函数，它可以解决蛮力问题。

  $（＃send-mail）。validate（{
 ... 
 showErrors：function（errorMap，errorList）{
 for（var i = 0; errorList [i]; i ++）{
 var element = this.errorList [i] .element; 
 //用暴力解决问题
 //移除现有的错误标签，从而强制插件重新创建它
 //娱乐==调用错误放置函数
t his.errorsFor（元件）卸下摆臂（）; 
} 
 this.defaultShowErrors（）; 
} 
 ... 
}）; 
  

也许有一个更清晰的解决方案，但这应该做，并给你时间调查更好解决方案。

I am using the jquery validation plugin and want to use the errorPlacement function to add error messages to the fields title attribute and display just a ✘ next to the field.

This works great when the form is submitted with the submit button but when any of the following events are triggered: - onfocusout - click - onkeyup

The validation checks are run but it skips the errorPlacement function and adds the full error message after the field, like the default behaviour.

I am using the following code:

$("#send-mail").validate({
    debug: true,
    // set this class to error-labels to indicate valid fields 
    success: function(label) {
        // set text as tick
        label.html("✔").addClass("valid"); 
    }, 
     // the errorPlacement has to take the table layout into account 
    errorPlacement: function(error, element) {
        console.log("errorPlacement called for "+element.attr("name")+" field");
        // check for blank/success error
        if(error.text() == "")
        { 
            // remove field title/error message from element
            element.attr("title", "");
            console.log("error check passed");
        }
        else
        {
            // get error message
            var message = error.text();

            // set as element title
            element.attr("title", message);

            // clear error html and add cross glyph
            error.html("✘"); 

            console.log("error check failed: "+message);
        }
        // add error label after form element
        error.insertAfter(element);
    },
    ignoreTitle: true,
    errorClass: "invalid"
});

解决方案

Your problem is that the plugin only calls the errorPlacement function once for each element which is validated. Namly when the error label for the element is first created. Afterwards the plugin just reuses the already present label and just replaces the html inside (or hides the error label if the element is now valid). That's why your cross gets removed and the actual error message is shown.

Just to make sure the flow of the plugin is clear.

1. element (no errorlabel yet)
2. element gets validated at some point
3. plugin creates error label and calls errorPlacement function
4. element "cross" (error message in title)
5. Element gets focus and you change something
6. plugin revalidates element
7. Sees that error label was already created (and placed)
8. plugin just calls label.html(message) instead of removing old label and readding it

So you see your problem is a kind of optimization the plugin does to save some unnecessary inserts/removes of error labels. Which makes sense too.

You can check what I said by looking at the validation-plugin-sourcecode

jquery.validate.js v1.6 check in function showLabel lines 617-625 for the relevant pieces.

---

A possible solution could be to additional provide a custom showErrors callback which solves the problem with brute force.

Something along the lines of

$("#send-mail").validate({
...
    showErrors: function(errorMap, errorList) {
        for (var i = 0; errorList[i]; i++) {
            var element = this.errorList[i].element;
            //solves the problem with brute force
            //remove existing error label and thus force plugin to recreate it
            //recreation == call to errorplacement function
            this.errorsFor(element).remove();
        }
        this.defaultShowErrors();
    }
...
});

Maybe there is a cleaner solution to this but this should do it and give you time to investigate a better solution.

这篇关于jQuery Validation Plugin：当onfocusout，keyup和click时调用errorPlacement函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！