javascript - 将 jQuery 验证器的 valid() 或 element() 方法与远程方法一起使用

标签 javascript jquery jquery-validate

jQuery 验证器 valid() 方法 ( http://jqueryvalidation.org/valid ) 检查所选表单是否有效或所有所选元素是否有效。

jQuery 验证器 element() 方法 ( http://jqueryvalidation.org/Validator.element/ ) 验证单个元素,如果有效则返回 true,否则返回 false。

但是,使用远程方法时,第一次检查表单时,两种方法都会错误地指示该元素通过了验证。

如何将 valid()element() 与远程验证方法一起使用?

https://stackoverflow.com/a/3884995/1032531提供了一个解决方案,但它无法与当前版本的 jQuery Validator 正常工作。当异步调用以 this.check( checkElement ) !== false 运行时,element() 不再返回 undefined (v1 的第 423 行.13.1) 只会返回 truefalse。因此,可以任意暂停 100 毫秒,但无法检查这是否是正确的时间量。

顺便说一句,我问这个问题的原因是我希望使用 jQueryValidator 进行内联编辑。 https://jsfiddle.net/vctt9utd/显示了一个工作示例(远程方法除外)。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                var validator=$("#myForm").validate({
                    rules: {
                        bla: {
                            minlength:2,
                            maxlength:4,
                            required:true,
                            remote: "validate.php"
                        }
                    },
                    messages: {
                        bla: {
                            remote:"error message"
                        }
                    }
                });

                $('#testit').click(function(){
                    $('#bla').val('test');
                    console.log($('#bla').valid());
                    console.log(validator.element('#bla'));
                })
            });
        </script>
    </head>

    <body>
        <form id="myForm" method="post">
            <input name="bla" id="bla" value="" readonly>
        </form>
        <button id="testit">testit</button>
    </body> 
</html> 

最佳答案

有点像黑客,但似乎有效。我不喜欢它发起两个 ajax 请求的方式。我想我可以动态更改规则以从验证器的规则中删除远程方法,但是,然后我需要手动添加消息。从技术上讲,对于我的应用程序,我不需要显示消息,但使用 return input.next().html(); 来获取消息,如 https://jsfiddle.net/vctt9utd/ 中所示。 .

http://jsfiddle.net/msprwad5/

<form id="myForm" method="post">
    <input name="myelement" id="myelement" value="">
</form>
<button id="testit">testit</button>

 var validator = $("#myForm").validate({
     rules: {
         myelement: {
             minlength: 2,
             maxlength: 4,
             required: true,
             remote: {
                 url: "/echo/html/",
                 type: "POST",
                 data: {
                     html: 0,
                     delay: .5
                 }
             }
         }
     },
     messages: {
         myelement: {
             remote: "error message"
         }
     }
 });

 $('#testit').click(function () {
     if ($('#myelement').valid()) {
         $.post("/echo/html/", {
             html: 0,
             delay: .5
         }, function (status) {
             if(!+status){alert('failed remote validation');}
         });
     }
     else {alert('failed normal validation if first attempt, otherwise could be either.');}
 })

关于javascript - 将 jQuery 验证器的 valid() 或 element() 方法与远程方法一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29734937/

相关文章:

javascript - 如何重新分配函数参数

javascript - jQuery 滚动显示隐藏内容

jQuery 验证插件 : callback when element value is valid

javascript - 如何将节点从一个列 div 拖到另一列 div

javascript - 防止 Google 选择器弹出窗口被浏览器阻止

jquery - 在标题调整大小时动画图像交换

javascript - 帮助用 javascript 和 jQuery 技能打动面试官

jquery 验证插件未在 Rails 中显示错误消息

asp.net-mvc - 如何以编程方式触发由 Razor View 设置的客户端验证?

javascript - 将 2 个折线图放入一张 Google 图表中