jquery howto：验证 div 而不是表单

Question

我正在使用 asp.net，所以它已经有一个<fomr id="aspnetForm" name="aspnetForm">。

我想要一个允许“单独提交多个表单”的页面。例如，我希望用户保存他们的简历。在“教育经验”页面上，我想允许用户的多条记录，每条记录都可以用ajax单独编辑和保存，但在ajax之前验证。

类似：

<form id="aspnetForm" name="aspnetForm">
<div class="item_edit">
    1
    <input type="text" class="required" name="title" />
    <input type="text" class="required" name="description" />
    <input type="button" class="save" value="save" />
</div>
<div class="item_edit">
    2
    <input type="text" class="required" name="title" />
    <input type="text" class="required" name="description" />
    <input type="button" class="save" value="save" />
</div>
</form>

$("input.save").click(function(){
    var thediv = $(this).parent();
    if(thediv.valid()){
        //save with ajax
    }
    else{
        //show error, modal window preferred
    }
})

顺便说一句：如果有帮助，我正在使用backbone.js。

编辑：我的backbone.js 代码如下所示。上面的<div class="item_edit"> 是从模板渲染出来的。

APIPortfolio.Views.OtherInfoCollection = Backbone.View.extend({
    el : "#otherinfo-container",
    template : "#otherinfo-template",
    initialize : function(options) {
    this.modelList = options.modelList.models;
    },
    render : function() {
        var self = this;
    $(self.el).empty();
    _.each(this.modelList, function(model) {
            $(self.el).append(Mustache.to_html($(self.template).html(), model.toJSON()));
    })
    return this;
}
});

Answer 1

假设您的 'item_edit' div 中可能有更多类型的表单元素，您可以为 div 中的每个表单元素添加一个类，并将其命名为 'item'。所以“item_div”现在看起来像：

<div class="item_edit">
    1
    <input type="text" class="required item" name="title" />
    <input type="text" class="required item" name="description" />
    <input type="button" class="save" value="save" />
</div>

我们这样做是为了不假设“item_edit”中只有“标题”和“描述”

您可以定义一个以这种方式保存表单的部分元素的函数：

function savePartial(itemEditDiv)
{
    var bool = true;
    $(itemEditDiv).find('item').each(function(){
        var val = $(this).val()    //this is the value of the 'title' or 'description' etc
        //code to check if the value is valid (set bool = false in case its not valid)
    });
    return bool;
}

现在您需要做的就是向“保存”按钮添加一个单击事件处理程序来调用此 savePartial 函数：

$("input.save").click(function(){
    var thediv = $(this).parent();
    if(savePartial(thediv))
    {
         //success message
    }
    else
    {
        //something went wrong
    }
});

此外，您可以在“item”字段中添加“msg”参数，并捕获数组中无效项目的消息以显示错误消息。

Answer 2

实际上，您并没有使用 Backbone.js。但是如果你决定这样做，你应该有一个代表你的表单的视图，它与一个模型实例相关联。在您的视图中，您应该有一个 events 属性来处理您的点击事件，如下所示：

var Thingy = Backbone.Model.extend({
  //implement me
})

var ThingyForm = Backbone.View.extend({
  events: function(){
    'input.save click': function(){
      if(this.model.isValid()){
          this.model.save()
      }
      else{
          //show error, modal window preferred
      }
    }
  }
})

thingy = new Thingy({attr1: 'val1', attr2: 'val2'})
thingyForm = new ThingyForm({model: thingy})

还有很多工作要做才能将其连接到远程资源并连接模型的验证等。但这应该可以帮助您入门。我可以建议以下两个资源：

Backbone.js Documentation - 全面，Backbone 非常轻量级，大概一个小时就能读完整个源代码。

Backbone Fundamentals free eBook - 这本书的前四五章会让你入门。

祝你好运。

Answer 3

为什么不使用 jQuery 验证？您可以向 html 元素添加属性，并通过一次调用验证所有这些属性。

这是它的链接...似乎可以解决问题http://docs.jquery.com/Plugins/Validation