The Problem is, when i start my view there are these ok icons in the validation message, which is described in the css of a valid email, but the email is not valid because of the Required Attribute in the model. I dont know how i can fix it. My aim is that
when I open my view that the Validation Message has got the class .field-validation-error because of the empty field.
I hope someone can help me
Here you can see my Model which describes the validation.
[DataType(DataType.EmailAddress)]
[Required(ErrorMessage = "Sie müssen Ihre Email Addresse angeben")]
[RegularExpression(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$", ErrorMessage = "Ungültige Email")]
public string Email { get; set; }
[DataType(DataType.Password)]
[Required(ErrorMessage = "Sie müssen Ihr Passwort angeben")]
[MinLength(5, ErrorMessage = "Ihr Passwort ist zu kurz")]
public string Password { get; set; }
required fields are validated only after user has edited them at leasr once by design. If you want immediate validation you have to call mnually the functions that performs validation. Pls see the doc of the jQuery validation plugin. Here it is explained how
to force validation of a single field, or of the whole form.
and then you can make use your these classes on your success and failure callback using
this trick,
<script>
$(function () {
var settngs = $.data($('form')[0], 'validator').settings;
var oldErrorFunction = settngs.errorPlacement;
var oldSucessFunction = settngs.success;
settngs.errorPlacement = function (error, inputElement) {
console.log($(inputElement).closest('div').next())
$(inputElement).closest('div').next().removeClass('myfield-validation-valid').addClass('myfield-validation-error')
oldErrorFunction(error, inputElement);
}
settngs.success = function (error) {
console.log($(error).closest('div'))
$(error).closest('div').addClass('myfield-validation-valid').removeClass('myfield-validation-error')
oldSucessFunction(error);
}
});
</script>
"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting Imran Baloch MVP, MVB, MCP, MCTS, MCPD
Safari92
Member
25 Points
24 Posts
MVC 3 Validation Problem
Sep 02, 2011 10:31 AM|LINK
Hi Guys!
I have a Problem with my Clientside Validation
The Problem is, when i start my view there are these ok icons in the validation message, which is described in the css of a valid email, but the email is not valid because of the Required Attribute in the model. I dont know how i can fix it. My aim is that when I open my view that the Validation Message has got the class .field-validation-error because of the empty field.
I hope someone can help me
Here you can see my Model which describes the validation.
[DataType(DataType.EmailAddress)] [Required(ErrorMessage = "Sie müssen Ihre Email Addresse angeben")] [RegularExpression(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$", ErrorMessage = "Ungültige Email")] public string Email { get; set; } [DataType(DataType.Password)] [Required(ErrorMessage = "Sie müssen Ihr Passwort angeben")] [MinLength(5, ErrorMessage = "Ihr Passwort ist zu kurz")] public string Password { get; set; }____________________________________________
This is the HTML Markup
@using (Html.BeginForm()) { <div class="inputline"> <div class="textbox-text left"> @Html.LabelFor(model => model.Email) </div> <div class="textbox left"> @Html.TextBoxFor(model => model.Email) </div> <div class="textbox-message left"> @Html.ValidationMessageFor(model => model.Email) </div> </div> <div class="clear"></div> <div class="inputline"> <div class="textbox-text left"> @Html.LabelFor(model => model.Password) </div> <div class="textbox left"> @Html.PasswordFor(model => model.Password) </div> <div class="textbox-message left"> @Html.ValidationMessageFor(model => model.Password) </div> </div> }.field-validation-error:before { content: ""; display: inline-block; height: 16px; width: 16px; margin-right: 4px; background-image:url(../../Images/Close-2-icon.png); } .field-validation-valid:before { content: ""; display: inline-block; height: 16px; width: 16px; margin-right: 4px; background-image:url(../../Images/Ok-icon.png); }francesco ab...
All-Star
20910 Points
3278 Posts
Re: MVC 3 Validation Problem
Sep 02, 2011 11:26 AM|LINK
Mvc Controls Toolkit | Data Moving Plug-in Videos
imran_ku07
All-Star
45815 Points
7698 Posts
MVP
Re: MVC 3 Validation Problem
Sep 03, 2011 06:24 AM|LINK
It is good to create a custom class for your success and failure.
for example,
.myfield-validation-error
{
content: "";
display: inline-block;
height: 16px;
width: 16px;
margin-right: 4px;
}
.myfield-validation-valid
{
content: "";
display: inline-block;
height: 16px;
width: 16px;
margin-right: 4px;
background-image:url(../../Images/Ok-icon.png);
}
and then you can make use your these classes on your success and failure callback using this trick,
<script>
$(function () {
var settngs = $.data($('form')[0], 'validator').settings;
var oldErrorFunction = settngs.errorPlacement;
var oldSucessFunction = settngs.success;
settngs.errorPlacement = function (error, inputElement) {
console.log($(inputElement).closest('div').next())
$(inputElement).closest('div').next().removeClass('myfield-validation-valid').addClass('myfield-validation-error')
oldErrorFunction(error, inputElement);
}
settngs.success = function (error) {
console.log($(error).closest('div'))
$(error).closest('div').addClass('myfield-validation-valid').removeClass('myfield-validation-error')
oldSucessFunction(error);
}
});
</script>
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD
Young Yang -...
All-Star
21345 Points
1818 Posts
Microsoft
Re: MVC 3 Validation Problem
Sep 06, 2011 04:02 AM|LINK
Hi Safari,
Maybe you can replace reqired attribute after regularexpression attribute. Please check this link:
http://stackoverflow.com/questions/7242063/asp-net-mvc-3-client-side-e-mail-validation-doesnt-work
Hope this helpful
Regards
Young Yang
Feedback to us
Develop and promote your apps in Windows Store