Manuel de validation de formulaire dans MVC 3 et JQuery
Je veux être en mesure de déclencher la validation de formulaire côté client lorsque l'utilisateur sélectionne le bouton "GO". Actuellement, lorsque le bouton "GO" est sélectionné, il ne permet pas de valider le formulaire complet. Par exemple, Si je charge le formulaire et sélectionnez le bouton "Go" sans donner le focus à la zone de texte, rien n'est validé et val.Valide() renvoie la valeur true. Si je fais entrer des données non valides dans une zone de texte de validation est exécuté à chaque élément; et lorsque je sélectionne le bouton "GO", val.Valide() retourne la valeur false.
Donc ce que je suis en train de faire, c'est quand un utilisateur de sélectionner un bouton ou d'un autre événement, je veux déclencher toutes les formes de validation.
Je fais cela dans MVC 3
public class TestValidationModel
{
[Required(ErrorMessage="UserName Is Required")]
[RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
[StringLength(12, MinimumLength = 3)]
public string UserName { get; set; }
[Required(ErrorMessage="Password Is Required")]
[StringLength(20, MinimumLength = 3)]
public string Password { get; set; }
[Required(ErrorMessage="Email Address Is Required")]
[Display(Name = "Email Address")]
public string EmailAddress{ get; set; }
}
<script src="/BasicMvc3Example2/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/BasicMvc3Example2/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#butValidateForm").click(function(){
var val = $('#myForm').validate()
alert(val.valid());
})
});
</script>
@using (Html.BeginForm("", "", FormMethod.Post, new {id = "myForm"}))
{
<div>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div>
@Html.LabelFor(m => m.Password)
@Html.TextBoxFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
<div>
@Html.LabelFor(m => m.EmailAddress)
@Html.TextBoxFor(m => m.EmailAddress)
@Html.ValidationMessageFor(m => m.EmailAddress)
</div>
<button id="butValidateForm">GO</button>
<input type="submit" id="submitForm" value="Submit" />
}
Mise à jour
Je crois que j'ai trouvé la solution à mon problème. Voir showErrors ci-Dessous
<script type="text/javascript">
$(function () {
$("#butValidateForm").click(function () {
var val = $('#myForm').validate();
val.showErrors(); //<-- Call showErrors
alert(val.valid());
})
});
</script>
Suivant ce lien vers le post sur JQuery formes ne concernent pas mon problème, mais j'ai été en mesure de trouver les noms de méthode que je cherchais.
http://plugins.jquery.com/content/jqueryvalidate-showerrors-issue-form-wizard
Si quelqu'un a une meilleure réponse, veuillez fournir de la rétroaction.
Mise à jour
Le code précédent fonctionne un peu dans Firefox, mais pas sous IE. Je n'ai la suite et il travaille maintenant dans Firefox, mais pas encore dans les ID
$(function () {
$("#myForm").submit(function (e) {
var val = $('#myForm').validate(); //<--added the semi-colon
val.showErrors();
alert(val.valid());
e.preventDefault();
});
});
// $("#butValidateForm").click(function () {
// var val = $('#myForm').validate()
// val.showErrors();
// alert(val.valid());
// })
});
Merci pour Utilisation de jQuery Pour Détourner ASP.NET MVC Forme Postes pour me pointer dans la bonne direction. Mais pas encore parfait
OriginalL'auteur Mike Barlow - BarDev | 2011-02-19
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas si c'est le meilleur/le plus efficace, mais je le fais par la validation de chaque élément individuellement dans ma propre fonction.
Il serait bien de laisser valider automatiquement, mais j'ai toujours l'impression de courir dans une étrange logique métier règle de ne pas se faire attraper par le générique de la validation des méthodes. Cette façon de faire me permet de contrôler l'ensemble de la validation de la façon dont je le veux, mais s'appuyant sur les construit dans la validation, la plupart du temps.
Dans le contexte de cette situation, je dirais la .chaque méthode est la pire façon de mettre en œuvre IsMyFormValid(). Le IsMyFormValid() la méthode existe pour définir explicitement quels éléments sont validés. La meilleure solution pour valider chaque élément serait de supprimer complètement IsMyFormValid() et l'appel suivant: ("#butValidateForm").bouton().cliquez sur(function () { return IsMyFormValid(); }); car c'est ce que la validation plugin par défaut.
aahaa! Je pensais que tu voulais valider tous les domaines.
OriginalL'auteur
OriginalL'auteur Adamy
Vous ne savez pas si vous avez compris cela encore, mais j'ai éprouvé la même chose c'est à dire avec
$("#myForm").submit
. Utilisationlive
:OriginalL'auteur Martin
Sa ne fonctionne pas dans IE parce qu'il vous manque un point-virgule:
Pouvez-vous préciser "ne fonctionne pas"?
Bonne question. L'Événement que j'ai attaché à la soumettre le formulaire n'est jamais appelé. L'alerte n'est jamais affiché.
OriginalL'auteur jfar