部分表单的客户端验证

Question

我目前正在开发一个使用 C# 和 Asp.Net MVC 开发的应用程序。我有一个分为两部分的表格。如果单击，则每个都有 3 个提交按钮，当然会执行客户端验证并抱怨是否需要一个或多个输入。

点击次数如下：

1. 提交 - 验证不应该是表单的前半部分
2. 保存 - 无需验证
3. 临时添加 - 表单下半部分的验证

我的视图模型类看起来像

public class ViewModel
{
    public User User { get; set; } //used for first half of the form
    public Department Department { get; set; } //used for second half of the form
}

我的 POCO 课程看起来像

public class User
{
    public int Id { get; set; }

    [Required]
    public string Username { get; set; } 
    public DateTime Dob { get; set; }

    //more required properties
}

public class Department
{
    public int Id { get; set; }

    [Required]
    public string DepartmentName { get; set; }

    //more required properties
}

在 保存 上，如果我有 cancel 类，则单击它似乎可以工作并且没有完成验证。但是，我似乎可以弄清楚如何为其他两个按钮做到这一点。有没有办法或者我在这里完全偏离轨道。

Answer 1

当您决定在评论中使用选项 2 时，这里是它的解决方案。

如果您有 3 个不同的按钮...

<button type="button" id="save" class="submit">Save</button>
<button type="button" id="submit" class="submit">Submit</button>
<button type="button" id="tempAdd" class="submit">Temporarily Add</button>

您必须添加一个功能并将其与以上所有按钮绑定。

$(function(){
 $("submit").click(function(){
   var ignoreValidationElements = [];
   if$(this).attr("id") == "save")
   {
     // add element ids which you want to exclude from validation
     ignoreValidationElements.push("FirstName"); 
     ignoreValidationElements.push("LastName");
   }
   else if$(this).attr("id") == "submit")
   {
     ignoreValidationElements.push("FirstName");
   }
   else if$(this).attr("id") == "tempAdd")
   {
     ignoreValidationElements.push("LastName");
   }

    // code to remove validation attributes
    for(i = 0; i < ignoreValidationElements.length;i++)
    {
       var element = $("#" + ignoreValidationElements[i]);
       // remove all validation related attributes from it
       var attributes = element[0].attributes;
       for(var j = 0; j <attributes.length; j++)
       { 
           if(attributes[j].name.indexOf("data-") >=0)
           {
               var attributItem = attributes[j];
               var attributeName = attributeItem.name;
               element.removeAttr(attributeName);

           }
       }

//submit the form
    }
  });

});