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 
    } 
}) 

BTW：我使用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

为什么不使用jQuery验证？你可以添加属性给你的html元素，并通过一次调用来验证它们。

这里的链接吧...好像它会做的伎俩http://docs.jquery.com/Plugins/Validation

Answer 2

其实，你不使用Backbone.js的。但是如果你决定，你应该有一个代表你的表单的视图，它与模型实例相关联。在你看来，你应该有一个处理点击事件，像这样的事件属性：

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

假设您的'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'参数，并捕获数组中无效项目的消息以显示错误消息。