如何使 jquery 验证与我的 jedatible 插件一起工作？

Question

我正在尝试使用我的 jeditable 插件实现 jquery 验证。由于 jeditable 对我来说有点新，我想我会尝试使用我在论坛上找到的代码添加尝试。这是我的原始代码，除了验证之外运行良好。

 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"      type="text/javascript"></script>
 <script src="../../Scripts/jquery.jeditable.js" type="text/javascript"></script>
 <script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>



  <script type="text/javascript">
      $(document).ready(function () {

     $(".display-label").editable("/Course/RubricsEdit");

     $(".text").editable("/Course/RubricsEdit",
                    {
                        submitdata: {
                            DepartmentId: function () {
                                return $("#DepartmentId").val();
                            },
                            RecordType: "DEPARTMENT"
                        }
                    });

然后我尝试了这个：

     <script type="text/javascript">
       $(document).ready(function () {

       $(".display-label").editable("/Course/RubricsEdit");

       $(".text").editable("/Course/RubricsEdit",
                    {
                        submitdata: {
                            DepartmentId: function () {
                                return $("#DepartmentId").val();
                            },
                            RecordType: "DEPARTMENT"
                        }
                    });

   $(".text").editable("/Course/RubricsEdit", {
   submitdata: function (settings, td) {
    var input = $(td).find('input');
    $(this).validate({
        rules: {
            'nameofinput': {
                number: true
            }
        },
        messages: {
            'actionItemEntity.name': {
                number: 'Only numbers are allowed'

            }

        }
    })

    return ($(this).valid());
     }
 });


 });
</script> 

仍然有效，但没有发生验证.. 有没有办法使用我的 jeditable 插件进行验证？

更新： 所以我尝试了这个：

 <script type="text/javascript">
 $(document).ready(function () {





     $(this).validate({
         rules: {
             submitdata: {
                 number: true
             }
         },
         messages: {
             submitdata: {
                 number: 'Only numbers are allowed'
             }

         }
     });





     $(".display-label").editable("/Course/RubricsEdit");

     $(".text").editable("/Course/RubricsEdit",
                    {
                        submitdata: {
                            DepartmentId: function () {
                                return $("#DepartmentId").val();
                            },
                            RecordType: "DEPARTMENT"
                        }
                    });



 });
</script> 

…并收到一条错误消息：

Microsoft JScript 运行时错误：对象不支持属性或方法“验证”。我可能会错过什么？

Answer 1

如果您要手动编写自己的验证规则（通过调用$(this).validate({...}），则不能再使用不显眼的验证。所以摆脱jquery.validate.unobtrusive.min.js 脚本，因为它不再对你有用了。不显眼的验证的全部意义在于 ASP.NET MVC 助手将检查您的模型属性，如果它们被验证属性（例如 Required）修饰，则在输入元素上发出相应的 HTML5 data-* 属性，这些属性将由jquery.validate.unobtrusive.min.js 脚本在jQuery.validate 中动态注册验证规则。如果您根据自己的规则单独使用插件，则不应使用不显眼的验证，因为两者不能一起使用。

Answer 2

关于您的代码：

$(".text").editable("/Course/RubricsEdit", {
   submitdata: function (settings, td) {
    var input = $(td).find('input');
    $(this).validate({ // <-- this is in the wrong place
        rules: {
            'nameofinput': {
                number: true
            }
        },
        messages: {
            'actionItemEntity.name': {
                number: 'Only numbers are allowed'

            }

        }
    })

    return ($(this).valid());
     }
 });

您的部分问题是您尝试使用 .validate() 手动将 jQuery 验证应用于每个 input。

.validate() 应该只在 DOM 中使用 一次 准备 初始化 form 上的插件，不 用于手动验证每个字段。该插件会自动处理所有字段验证。

.valid() 然后可以使用，之后 .validate() 被初始化，强制对表单进行验证测试和/或返回结果的相应布尔值（对于整个表单） .

我还注意到您输入的名称'nameofinput' 与messages: {} 中对应的'actionItemEntity.name' 不匹配。如果这是您要覆盖的相应消息，则这些必须相同。 (You only need quotes around the input name if it contains special characters like periods and brackets.)

这样的事情可以让你回到正轨：

$(document).ready(function() {

    $('#yourform').validate({
        rules: {
            nameofinput: {
                number: true
            }
        },
        messages: {
            nameofinput: {
                number: 'Only numbers are allowed'
            }

        }
    });

});

简单演示：http://jsfiddle.net/Hr3bB/