asp.net mvc-我如何让jquery验证与我的jedatable插件一起工作

Question

我正在尝试用我的可编辑插件实现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运行时错误：对象不支持属性或方法"validate"。我会错过什么？

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 Validation手动应用于每个input。

.validate()应该只在DOM中使用一次，以便初始化表单上的插件，而不是手动验证每个字段。插件会自动处理所有字段验证。

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

我还注意到，您输入的'nameofinput'的名称与messages: {}中对应的'actionItemEntity.name'不匹配。如果这是你试图超越的相应信息，那么这些信息必须是相同的。（如果输入name包含句点和方括号等特殊字符，则只需要在其周围加引号。）

像这样的东西可以让你回到正轨：

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

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