Ce que je voudrais
Je souhaite déclencher la validation côté client dans ma vue avec un événement de mon choix. Cela pourrait être 'onblur', peut-être un autre bouton, mais autre chose que le bouton de soumission.
Liens pertinents
Comment déclencher la validation sans utiliser de bouton d'envoi
Application d'une validation jquery non intrusive au contenu dynamique dans ASP.Net MVC
Ce que j'ai essayé
Étant donné un auditeur d'événements divers, j'ai tiré les méthodes suivantes sans succès:
$(selector).validate();
$(selector).valid();
$.validator.unobtrusive.parseDynamicContent(selector);
$.validator.unobtrusive.parse($(selector));
Résumé
J'ai donc besoin d'une validation côté client pour déclencher un événement donné (autre que le soumettre) et afficher les messages de validation correspondants. Je ne pense pas qu'une syntaxe de Markup/Razor soit nécessaire, car la validation du client est déclenchée lors de l'envoi et tous les messages de validation correspondants s'affichent comme prévu.
$('form').valid()
devrait fonctionner. Illustrons.
Modèle:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
Manette:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
}
Vue:
@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>
Validation manuelle des messages personnalisés injectés directement au format 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()" />
}
}