ASP.Net MVC Custom client side validation not firing - asp.net-mvc

Question

i have the below jquery unobtrusive code which is not firing.
$.validator.unobtrusive.adapters.add('customvalidation', ['productname'], function (options) {
options.rules['customvalidation'] = { productname: options.params.productname };
});
$.validator.addMethod("customvalidation", function (value, element, param) {
alert(param.productname);
return false;
});
but the above code suppose to show alert i guess when pressing button to submit my form.
here is my full code
Model and view model
public class Product
{
public int ID { set; get; }
public string Name { set; get; }
}
public class Hobby
{
public string Name { get; set; }
public bool IsSelected { get; set; }
}
public class SampleViewModel
{
[Display(Name = "Products")]
public List<Product> Products { set; get; }
//[AtleastOne(ErrorMessage = "Select at least one checkbox.")]
public List<Hobby> Hobbies { get; set; }
[Required(ErrorMessage = "Select any Product")]
public int SelectedProductId { set; get; }
[Required(ErrorMessage = "Select Male or Female")]
public string Gender { get; set; }
public bool? IsAdult { get; set; }
public int? Age { get; set; }
[ConditionalAttribute(SelectedProductID = "SelectedProductId", Products = "Products", Hobbies = "Hobbies",IsAdult="IsAdult",Age="Age")]
public string ErrorMsg { get; set; }
}
Custom server side validation
[AttributeUsage(AttributeTargets.Property, AllowMultiple = true, Inherited = true)]
public class ConditionalAttribute : ValidationAttribute , IClientValidatable
{
public string SelectedProductID = "", Products = "", Hobbies="";
public string IsAdult = "";
public string Age ="";
string _productname = "";
bool _hashobby = false;
bool _isadult = false;
int _age = 0;
public ConditionalAttribute() { }
public ConditionalAttribute(string SelectedProductId, string Products, string Hobbies, string IsAdult, string Age)
{
this.SelectedProductID = SelectedProductId;
this.Products = Products;
this.Hobbies = Hobbies;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
//getting selected product
Product oProduct = null;
ValidationResult validationResult = ValidationResult.Success;
var containerType = validationContext.ObjectInstance.GetType();
var SelectedProductID = containerType.GetProperty(this.SelectedProductID);
Int32 selectedproduct = (Int32)SelectedProductID.GetValue(validationContext.ObjectInstance, null);
var ProductList = containerType.GetProperty(this.Products);
List<Product> oProducts = (List<Product>)ProductList.GetValue(validationContext.ObjectInstance, null);
oProduct = oProducts.Where(e => e.ID == selectedproduct).FirstOrDefault();
_productname = oProduct.Name;
if (_productname != "iPod")
{
var field2 = containerType.GetProperty(this.Hobbies);
List<Hobby> hobbies = (List<Hobby>)field2.GetValue(validationContext.ObjectInstance, null);
foreach (var hobby in hobbies)
{
if (hobby.IsSelected)
{
_hashobby = true;
break;
}
//return ValidationResult.Success;
}
if (!_hashobby)
{
this.ErrorMessage = "Select Any Hobbie's checkbox";
return new ValidationResult(ErrorMessage);
//return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
}
var PropIsAdult = containerType.GetProperty(this.IsAdult);
if (PropIsAdult.GetValue(validationContext.ObjectInstance, null) != null)
{
_isadult = (bool)PropIsAdult.GetValue(validationContext.ObjectInstance, null);
if (_isadult)
{
var PropAge = containerType.GetProperty(this.Age);
if (PropAge.GetValue(validationContext.ObjectInstance, null) != null)
{
_age = (Int32)PropAge.GetValue(validationContext.ObjectInstance, null);
if (_age != null && _age <= 0)
{
this.ErrorMessage = "Age is compulsory for adult";
return new ValidationResult(ErrorMessage);
}
}
else
{
this.ErrorMessage = "Age is compulsory for adult";
return new ValidationResult(ErrorMessage);
}
}
}
return ValidationResult.Success;
}
// Implement IClientValidatable for client side Validation
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
ValidationType = "customvalidation",
};
rule.ValidationParameters.Add("productname", _productname);
yield return rule;
}
}
My view code
#model AuthTest.Models.SampleViewModel
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#using (Html.BeginForm("Index", "TestVal", FormMethod.Post, new { name = "TestVal" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>DateValTest</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Products, htmlAttributes: new { #class = "control-label col-md-2", style = "padding-top:0px;" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.SelectedProductId, new SelectList(Model.Products, "ID", "Name"), "-- Select Product--")
#Html.ValidationMessageFor(model => model.SelectedProductId, "", new { #class = "text-danger" })
#for (int i = 0; i < Model.Products.Count(); i++)
{
<div>
#Html.HiddenFor(model => Model.Products[i].Name)
#Html.HiddenFor(model => Model.Products[i].ID)
</div>
}
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<b>Gender</b><br />
<label>
<span>Male</span> #Html.RadioButtonFor(model => model.Gender, "Male", new { style = "width:20px;" })
<span>Female</span>#Html.RadioButtonFor(model => model.Gender, "Female", new { style = "width:20px;" })
</label>
<label>
</label>
#Html.ValidationMessageFor(model => model.Gender, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 input-validation-error">
<b>Hobbies</b><br />
#for (int x = 0; x < Model.Hobbies.Count(); x++)
{
#Html.CheckBoxFor(p => p.Hobbies[x].IsSelected, new { #class = "hobbycls", id = "Hobbies" }) #:
#Html.LabelFor(p => p.Hobbies[x].IsSelected, Model.Hobbies[x].Name) #:
#Html.HiddenFor(p => p.Hobbies[x].Name)
}
<span id="Hobbies-error" class="field-validation-error">
<span>Select any hobbies.</span>
</span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<b>Is Adult</b><br />
<label>
<span>Yes</span> #Html.RadioButtonFor(model => model.IsAdult, "true", new { style = "width:20px;" })
<span>No</span>#Html.RadioButtonFor(model => model.IsAdult, "false", new { style = "width:20px;" })
</label>
</div>
<div class="col-md-offset-2 col-md-10">
<label>
Enter Age #Html.TextBoxFor(model => model.Age)
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<label>
#Html.HiddenFor(model => model.ErrorMsg)
#Html.ValidationMessageFor(model => model.ErrorMsg, "", new { #class = "text-danger" })
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Submit" class="btn btn-default" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#if (ViewBag.IsPostBack != null && ViewBag.IsPostBack)
{
<text>
<b>Your Selected Product ID :</b> #ViewBag.ProductID<br />
<b>Your Selected Product Name :</b> #ViewBag.ProductName<br />
<b>Gender :</b> #ViewBag.Gender<br />
<b>Hobbies :</b> #ViewBag.Hobbies <br />
<b>Is Adult :</b> #ViewBag.IsAdult <br />
<b>Age :</b> #ViewBag.Age <br />
</text>
}
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
//$.validator.unobtrusive.adapters.add('customvalidation', ['productname', 'hashobby', 'isadult', 'age'], function (options) {
$.validator.unobtrusive.adapters.add('customvalidation', ['productname'], function (options) {
options.rules['customvalidation'] = { productname: options.params.productname };
});
$.validator.addMethod("customvalidation", function (value, element, param) {
alert(param.productname);
return false;
});
</script>
}