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运行时错误：对象不支持属性或方法'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());
     }
 });

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

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

然后可以使用

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

我还注意到您的输入'nameofinput'的名称与'actionItemEntity.name'中的相应messages: {}不符。如果您尝试覆盖相应的消息，则这些必须相同。（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/

如何使用我的jedatible插件进行jquery验证？

2 个答案: