Client side validation on part of the form

Question

I'm currently working on an application which is being developed using C# and Asp.Net MVC. I have a form which is split into two parts. There are 3 submit buttons each if clicked, of course performs a client side validation and complains if one or more of the inputs are required.

The clicks of as follows:

1. Submit - validation should not be first half of the form
2. Save - no validation required
3. Temporarily Add - validation on the bottom half of the form

My view model class looks something like

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
}

and my POCO classes look like

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
}

On Save click if I had class cancel then that seems to work and no validation is done. However I can seem to figure out how I can do it for the other two buttons. Is there a way or am I completely going off the rail here.

Answer 1

as you decided to use Option 2 in your comment, here is the solution for it.

Provided you have 3 different buttons...

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

you have to add one function and bind it with all above buttons.

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

});