0

我正在尝试使用我的 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 运行时错误：对象不支持属性或方法“验证”。我会错过什么？

4

2 回答 2

0

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

于 2013-02-06T06:50:46.203 回答
0

关于您的代码：

$(".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());
     }
 });

您的部分问题是您试图手动将 jQuery Validation 应用于每个inputusing .validate().

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

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

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

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

$(document).ready(function() {

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

        }
    });

});

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

于 2013-02-06T16:05:58.720 回答