.Net Mvc 3 Trigger (other than submit button) Unobtrusive Validation

Question

What I would Like

I would like to trigger client-side validation in my View with an event of my choice. It could be 'onblur' maybe another button but something other than the submit button.

Relevant Links

How to trigger validation without using a submit button

Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC

What I've tried

Given a various event listener, I've fired the following methods with no luck:

$(selector).validate();

$(selector).valid();

$.validator.unobtrusive.parseDynamicContent(selector);

$.validator.unobtrusive.parse($(selector));

Summary

So I need client-side validation to fire on a given event (other than on submit) and show the corresponding validation messages. I dont feel like any of the Markup/Razor syntax is necessary as client-validation fires on submit and all the corresponding validation messages show as expected.

Answer 1

$('form').valid() should work. Let's exemplify.

Model:

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

View:

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.LabelFor(x => x.Foo)
    @Html.EditorFor(x => x.Foo)
    @Html.ValidationMessageFor(x => x.Foo)
}

<div id="validate">Hover here to trigger validation</div>

<script type="text/javascript">
    $('#validate').hover(function () {
        $('form').valid();
    });
</script>

Answer 2

Manual validation of custom messages injected directly to HTML

@{using (Html.BeginForm("addBuyOnlinepostA", "BuyOnline", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "form1" }))
  {

    @Html.ValidationSummary(true)

    <div class="row">
        <div class="col-sm-10">
            Product Qty
            <input class="inputs" required type="number" id="price" name="price" placeholder="Enter Price in AED"
                data-val="true" data-val-required="Please enter a value" data-val-regex="Please enter a valid number."
                data-val-regex-pattern="\d{1,20}" />
            <span class="field-validation-valid" data-valmsg-for="price" data-valmsg-replace="true"
                style="color: Red;"></span>
        </div>
    </div>   



    <input type="button" onclick="$('form').valid()" />

  }
}