表单部分的客户端验证

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

});