Validation errors not displayed on pageload


I have couple of [RequiredIf] data annotations and they work correctly if I submit the form after the pageload. I am trying to show the errors upfront (ie on pageload) and it is not working. It is directly calling controller Post. Please let me know how to fix it. Note: I am using EditorTemplates.

I tried using (https://foolproof.codeplex.com/workitem/21174) which did not work for me

My code:
using Foolproof;

class UserViewModel
[Column(Order = 0), Key]
[Display(Name = "User ID")]
public string UserID { get; set; }

[Required(ErrorMessage="Name is Mandatory")]
[Display(Name = "User name")]
public string UserName { get; set; }

public List<RelatedAccountInfo> relatedAccountList { get; set; } //IEnumerable

public UserViewModel()
  relatedAccountList = GetRelatedAccount();

public class RelatedAccountInfo
[Column(Order = 1), Key]
[Display(Name = "Related Account Id:")]
public int RelatedAccount_Id { get; set; }

[Display(Name = "Related Account:")]
[RequiredIfTrue("isMandatory", ErrorMessage = "Please enter the Related Account details")]
public string RelatedAccount { get; set; }

public bool isMandatory { get { return true or false } } //Options are Y/N
public ActionResult Edit(string id)
UserViewModel userviewmodel = new UserViewModel();
userviewmodel.UserID = "1";
userviewmodel.UserName = null;

userviewmodel.relatedAccountList[0].RelatedAccount_Id = 1;

bool b = TryValidateModel(userviewmodel);
foreach (RelatedAccountInfo model in userviewmodel.relatedAccountList)
 b = TryValidateModel(model);
return View(userviewmodel);;

public ActionResult Edit(UserViewModel userviewmodel)
 if (ModelState.IsValid)
     //do something       
     return RedirectToAction("Index");
 return View(userviewmodel);

@model WebApplication1.Models.UserViewModel
@using (Html.BeginForm())
<div class="col-md-10"> @Html.EditorFor(model => model.UserID) @Html.ValidationMessageFor(model => model.UserID) </div> <div class="col-md-10"> @Html.EditorFor(model => model.UserName) @Html.ValidationMessageFor(model => model.UserName) </div> <div id="Tab_relatedAccount0" class="ChildHeader"> @Html.EditorFor(model => model.relatedAccountList[0], "RelatedAccount") @*@Html.Partial("RelatedAccount_Partial", @Model.relatedAccountList[0])*@ </div> <div id="Tab_relatedAccount1" class="ChildHeader"> @Html.EditorFor(model => model.relatedAccountList[1], "RelatedAccount") </div> <div class="form-group"> <input type="submit" value="Save" class="btn btn-default success" id="btnSave" /> <input type="submit" value="Cancel" class="btn btn-default cancel" id="btnCancel" /> @*<input type="button" value="Save" class="btn btn-default" id="btnSave" />*@ </div> }

@section Scripts {
__//If I comment this other errors are showing up otherwise it directly calls controller Post__

@model WebApplication1.Models.RelatedAccountInfo
@Html.HiddenFor(m => m.isMandatory)
<div> @Html.LabelFor(m => m.RelatedAccount_Id) @Html.EditorFor(m => m.RelatedAccount_Id) @Html.ValidationMessageFor(m => m.RelatedAccount_Id) </div> <div> @Html.LabelFor(m => m.RelatedAccount) @Html.EditorFor(m => m.RelatedAccount) @Html.ValidationMessageFor(m => m.RelatedAccount) </div> Custom.js (Javascript)
$(document).ready(function () {
var elem = document.getElementById('btnSave');

$('#btnSave').click(function (evt) {
var form = $('form');
var val = form.validate(); 

Partial View source (correct one):
<div> <label for="RelatedAccount">Related Account:</label> <input class="input-validation-error text-box single-line" id="RelatedAccount" .../> <span class="field-validation-error" ...</span> </div> EditorTemplate view source:
<div class="editor-label"> <label for="relatedAccountList_0__RelatedAccount">Related Account:</label> </div> <div class="editor-field"> <input class="text-box single-line" data-val="true" id="relatedAccountList_0__RelatedAccount" .../> <span class="field-validation-valid" ...</span> </div>