la validation d'un formulaire en asp.net mvc ( à l'aide de javascript )
je suis nouveau sur asp.net mvc et j'ai aforme avec la validation de certains et je veux le valider dans côté client donc j'écris normal script en javascript
pour être plus specefic mon problème était le return false ( comme il ne devrait pas envoyer des données au serveur et encore dans apage, mais cela n'arrive pas) ,note : j'ai tester le script dans la page html normale avec js et fonctionne très bien
mais comme je l'ai dit je ne suis pas familier avec mvc, donc je veux savoir si il y a quelque chose que j'ai manqué de travail, et, si il n'y aucune référence à un toturial dans ce specefic point, il serait bon , comme je l'ai remarqué dans ce lieu ( il n'y a pas de place pour les débutants :);
ceci est un extrait de mon code trop
@model registerationex.Models.register
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(false)
<fieldset>
<legend>register</legend>
<div class="editor-label">
@Html.LabelFor(model => model.name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.name)
<span id="error"></span>
@Html.ValidationMessageFor(model => model.name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.email)
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The email field is required." id="email" name="email" type="text" value="" onblur="checkuser(email);">
<span id="erroruser"></span>
@Html.ValidationMessageFor(model => model.email)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.age)
<span id="errorage"></span>
@Html.ValidationMessageFor(model => model.age)
</div>
<p>
<input type="submit" value="Create" onclick="allvalidate();" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script>
function allvalidate() {
var validated = true;
if (!validate()) validated = false;
if (!checkAge(age)) validated = false;
if (!checkuser(email)) validated = false;
return validated;
}
function validate() {
var txtf = document.getElementById('name');
if (txtf.value == 0 || txtf.value == null) {
document.getElementById('error').innerText = ('you must enter firstname');
document.getElementById('error').style.color = 'red';
txtf.focus();
return false;
}
else {
document.getElementById('error').innerText = ('');
return true;
}
}
function checkAge(input) {
if (input.value < 18 || input.value > 70) {
document.getElementById('errorage').innerText = ('age must be from 18 :70');
document.getElementById('errorage').style.color = 'red';
return false;
}
else {
document.getElementById('errorage').innerText = ('');
return true;
}
}
function checkuser(input) {
var pattern = '^[a-zA-Z]+$';
if (input.value.match(pattern)) {
document.getElementById('erroruser').innerText = '';
return true;
}
else {
document.getElementById('erroruser').innerText = ('enter valid email');
document.getElementById('erroruser').style.color = 'red';
return false;
}
}
</script>
Vous devez vous connecter pour publier un commentaire.
Vous avez inclus
@Scripts.Render("~/bundles/jqueryval")
qui, par défaut,jquery.validate.unobtrusive.js
, donc supprimer tous vos scripts et d'utiliser les fonctionnalités qui viennent avec MVC. Ajoutez simplement les attributs de validation de votre propriété.Maintenant tout ce que vos scripts à essayer de faire (mal) fait en dehors de la boîte (en supposant que vous n'avez pas désactivé discrète de validation) et le formulaire ne sera pas soumettre jusqu'à ce que les erreurs sont corrigées. Vous aussi maintenant obtenir la validation côté serveur qui est l'essentiel de validation (la validation côté client est juste un bonus, mais n'importe qui peut facilement le passer), de sorte que vous doit toujours valider sur le serveur
Également vous remplacer manuel de la tentative de créer une entrée de la propriété email avec
@Html.EditorFor(m => m.email)
et supprimer toutes lesonclick
attribueNote de côté: vous regex
^[a-zA-Z]+$
l'habitude même de permettre une adresse de courriel valide pour être entré (il ne permet même pas la@
ou.
caractères!). À l'aide de laEmailAddress]
attribut va générer la bonne regex (à partir dejQuery Validation 1.9.0
)jquery-{version}.js
,jquery.validate.js
etjquery.validate.unobtrusive.js
) et de ne pas avoir désactivé la validation côté client, alors vous obtiendrez deux côté client et côté serveur de validation en utilisant les attributs de validation. C'est une excellente fonctionnalité de la MVC afin de ne pas les ignorer.@Html.LabelFor(model => model.email)
va générer un<label>
étiquette avec le texte "e-mail", de sorte qu'il serait très déroutant pour un utilisateur si votre attend ensuite de pas entrez un e-mail (et quand ils le font, l'affichage d'un message leur disant ses pas valide, même si elle est!). Changer le nom de quelque chose qui transmet votre message, puis ajouter unRegularExpressionAttribute
- par exemple[RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Only upper and lower case letters are allowed.")]
La allvalidate() la fonction devrait ressembler à ceci ( appel de fonction envoyer, pas de valeur de retour) :