I am trying to validate email field. And I have a regular expression for email
/^[a-z0-9._%+-]+##[a-z0-9.-]+.[a-z]{2,4}$/
In visual studio my code
Email:<br>
<input type="text" ng-model="Email" id="txtEmail" ng-pattern="/^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/" name="Email" placeholder="Email" required>
<span ng-show="myForm.Email.$error.pattern">Please enter valid Email!</span>
<span ng-show="myForm.Email.$error.required">*</span><br>
An error occuring
Email validation is a popular problem and each regex pattern that you will find doesn't cover all the cases. The best way is to try to send any message to this email or you can use System.Net.Mail.MailAddress class
try
{
var email = new System.Net.Mail.MailAddress(value);
}
catch (FormatException)
{
//handle it here
}
You say you are using C# and MVC. You can use the built in validation; the email validation is supported via an attribute on the field in the model class:
[EmailAddress(ErrorMessage = "The email address is not valid")]
public string Email { get; set; }
The attributes are in the namespace System.ComponentModel.DataAnnotations
The Razor view then needs something like:
<div class="control-group">
#Html.ValidationMessageFor(m => m.Email)
#Html.LabelFor(m => m.Email, new { #class = "editor-label control-label" })
<div class="editor-field controls">
#Html.MbrraceTextBoxFor(m => m.Email, new { #class = "input-xlarge" })
</div>
</div>
There are many variants on the cshtml display styles.
You can create a variable for pattern.
#{
var pattern = "/^[a-z0-9._%+-]+##[a-z0-9.-]+.[a-z]{2,4}$/";
}
<input type="text" ng-model="Email" id="txtEmail" ng-pattern="#pattern" name="Email" placeholder="Email" required>
Related
I've created new MemberType with some extra custom properties, marked as Mandatory.
In the registration form I want these properties to be set as required, so if you don't fill them, you won't be able to proceed with the registration of a new member.
In the Member section, the properties are correctly set as Mandatory.
Here's a screenshot: https://i.ibb.co/bR4sd2v/immagine.png
Here's my code of the registration form:
using (Html.BeginUmbracoForm<UmbRegisterController>("HandleRegisterMember"))
{
<div class="row justify-content-center no-gutters">
<div class="col-8 mx-auto pt-5">
#Html.ValidationSummary("registerModel", true)
#if (registerModel.MemberProperties != null)
{
<div class="form-row justify-content-center">
<div class="form-group col-md-6">
#Html.TextBoxFor(m => registerModel.MemberProperties[0].Value, new { #class = "form-control rounded-0", #placeholder = registerModel.MemberProperties[0].Name})
#Html.HiddenFor(m => registerModel.MemberProperties[0].Alias)
#Html.ValidationMessageFor(m => registerModel.MemberProperties[0].Alias)
</div>
<div class="form-group col-md-6">
#Html.TextBoxFor(m => registerModel.MemberProperties[1].Value, new { #class = "form-control rounded-0", #placeholder = registerModel.MemberProperties[1].Name})
#Html.HiddenFor(m => registerModel.MemberProperties[1].Alias)
#Html.ValidationMessageFor(m => registerModel.MemberProperties[1].Alias)
</div>
</div>
}
<div class="form-row justify-content-center pt-5">
<div class="form-group col-md-6">
#Html.TextBoxFor(m => registerModel.Email, new { #class = "form-control rounded-0", #placeholder = "Email"})
#Html.ValidationMessageFor(m => registerModel.Email)
</div>
<div class="form-group col-md-6">
#Html.PasswordFor(m => registerModel.Password, new { #class = "form-control rounded-0", #placeholder = "Password"})
#Html.ValidationMessageFor(m => registerModel.Password)
</div>
</div>
<div class="form-row justify-content-center pt-5">
<div class="form-group col-md-6">
<button class="btn btn-light text-uppercase w-100" type="submit">Registrati</button>
</div>
</div>
</div>
</div>
#Html.HiddenFor(m => registerModel.MemberTypeAlias)
#Html.HiddenFor(m => registerModel.RedirectUrl)
#Html.HiddenFor(m => registerModel.UsernameIsEmail)
}
I expect that when I click on the Sumbit button (in my case is "Registrati"), under the input fields will appear the validation message saying that those fields are required. And the registration could not proceed until I fill them.
Like it happens with the standard fields Email and Password. Here's a screenshot: https://i.ibb.co/z2cD3TC/immagine.png
How can I check if those fields are required, and show the error message?
Your fields may be required within Umbraco, but the code in your views doesn't know that. In order to achieve validation through the HTML Helpers you're using, you'll need to create a ViewModel like this:
public class MyViewModel
{
[Required(ErrorMessage = "Full name is required")]
public string FullName { get; set; }
[Required(ErrorMessage = "Email is required")]
public string Email { get; set; }
[Required(ErrorMessage = "Password is required")]
[DataType(DataType.Password, ErrorMessage = "Password is invalid")]
public string Password { get; set; }
}
Your HTML helpers should then understand which fields are required and which aren't, which means you can get both clientside validation as well as serverside validation :)
I'm trying to implement Remote Validation for a field in a view. Everything so far is working except the parameter in the validation controller method is null even though the field contains a value. What did I miss?
Validation Controller Method
public JsonResult IsVanityURL_Available(string VanityURL)
{
if (!_webSiteInfoRepository.GetVanityURL(VanityURL))
return Json(true, JsonRequestBehavior.AllowGet);
string suggestedUID = String.Format(CultureInfo.InvariantCulture,
"{0} is not available.", VanityURL);
for (int i = 1; i < 100; i++)
{
string altCandidate = VanityURL + i.ToString();
if (_webSiteInfoRepository.GetVanityURL(altCandidate)) continue;
suggestedUID = String.Format(CultureInfo.InvariantCulture,
"{0} is not available. Try {1}.", VanityURL, altCandidate);
break;
}
return Json(suggestedUID, JsonRequestBehavior.AllowGet);
}
Entity Property
[DisplayName("Vanity URL")]
[Remote("IsVanityURL_Available", "Validation")]
[RegularExpression(#"(\S)+", ErrorMessage = "White space is not allowed.")]
[Editable(true)]
public string VanityURL { get; set; }
View
<div class="row">
<div class="form-group col-md-12">
<div class="editor-label">
#Html.LabelFor(model => model.SelectedContact.WebSiteInfoes[0].VanityURL)
</div>
<div class="input-group margin-bottom-small">
<span class="input-group-addon"><i class="fa fa-external-link-square fa-fw"></i></span>
#Html.TextBoxFor(model => model.SelectedContact.WebSiteInfoes[0].VanityURL, new { #class = "form-control", #placeholder = "Enter Vanity URL" })
</div>
</div>
</div>
UPDATE
The answer in the duplicate post does fix the problem.
I found an alternate way to avoid changing the jquery.validate.js file. This involved setting the name of the TextBoxFor in the view like so...
#Html.TextBoxFor(model => model.SelectedContact.WebSiteInfoes[0].VanityURL, new { #class = "form-control", #placeholder = "Enter Vanity URL", #Name="VanityUrl })
I reverted my js file change, then added a combination of the view name attribute and the model remote AdditionalFields definition and it worked just fine.
This change caused some unforeseen problems as well. I finally did get a solution. I changed the GET to a POST and grabbed the values I needed from the FormsCollection. This link got me going in the right direction. This allowed me to completely bypass the Complex Data Object naming problem
change your entity
[DisplayName("Vanity URL")]
[Remote("IsVanityURL_Available", "Validation",AdditionalFields = "VanityURL")]
[RegularExpression(#"(\S)+", ErrorMessage = "White space is not allowed.")]
[Editable(true)]
public string VanityURL { get; set; }
and add this to your view
#{
var VanityURL=Model.SelectedContact.WebSiteInfoes[0].VanityURL
}
<div class="row">
<div class="form-group col-md-12">
<div class="editor-label">
#Html.LabelFor(model => model.SelectedContact.WebSiteInfoes[0].VanityURL)
</div>
<div class="input-group margin-bottom-small">
<span class="input-group-addon"><i class="fa fa-external-link-square fa-fw"></i></span>
#Html.TextBox("VanityURL",VanityURL,new { #class = "form-control", #placeholder = "Enter Vanity URL" })
</div>
</div>
</div>
Friends,
This problem is really annoying me from last 2 days. I've finally decided to put it on SO.
I have following property in my Model
[Required]
[StringLength(20, MinimumLength = 4, ErrorMessage = "Length of this field should be between 3 and 20.")]
public string Password { get; set; }
[Required]
[StringLength(20, MinimumLength = 4, ErrorMessage = "Password Lenght should be between 4 and 20.")]
[Compare("Password", ErrorMessage = "Password did not match")]
[Display(Name = "Retype Password")]
public string RePassword { get; set; }
And Following HTML in razor to create input fields for the same.
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "control-label col-md-4" })
<div class="col-md-4">
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
</div>
<div class="col-md-4">
#Html.ValidationMessageFor(m => m.Password)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.RePassword, new { #class = "control-label col-md-4" })
<div class="col-md-4">
#Html.PasswordFor(m => m.RePassword, new { #class = "form-control", placeholder = "Retype Password" })
</div>
<div class="col-md-4">
#Html.ValidationMessageFor(m => m.RePassword)
</div>
</div>
It always render following HTML
<div class="form-group">
<label class="control-label col-md-4" for="Password">
Password
</label>
<div class="col-md-4">
<input id="Password" class="form-control" type="password" placeholder="Password" name="Password" data-val-required="The Password field is required." data-val-length-min="4" data-val-length-max="20" data-val-length="Length of this field should be between 3 and 20." data-val="true"></input>
</div>
<div class="col-md-4">
<span class="field-validation-valid help-block" data-valmsg-replace="true" data-valmsg-for="Password"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="RePassword">
Retype Password
</label>
<div class="col-md-4">
<input id="RePassword" class="form-control" type="password" placeholder="Retype Password" name="RePassword" data-val-required="The Retype Password field is required." data-val-length-min="4" data-val-length-max="20" data-val-length="Password Lenght should be between 4 and 20." data-val-equalto-other="*.Password" data-val-equalto="'Retype Password' and 'Password' do not match." data-val="true"></input>
</div>
<div class="col-md-4">
<span class="field-validation-valid help-block" data-valmsg-replace="true" data-valmsg-for="RePassword"></span>
</div>
</div>
Its No matter what I write in ErrorMessage in Compare attribute, It always has same value for data-val-equalto attribute that is 'Retype Password' and 'Password' do not match. for RePassword filed
this is a bug ：CompareAttribute does not use custom error messages and already fixed
download the fixed CompareAttributeAdapter http://aspnetwebstack.codeplex.com/Download/AttachmentDownload.ashx?ProjectName=aspnetwebstack&WorkItemId=1401&FileAttachmentId=755657
and RegisterAdapter
DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(System.ComponentModel.DataAnnotations.CompareAttribute), typeof(TheFixed.CompareAttributeAdapter));
This answer is very late so I'm sure you already figured this out, and since I didn't find any solution online that answered this question directly, I decided share what I did for the benefit of those searching for a solution:
Create a Custom Compare Attribute and apply your own error to it.
public class CustomCompareAttribute : CompareAttribute
{
public CustomCompareAttribute(string otherProperty, string ErrorCode) : base(otherProperty)
{
ErrorMessage = CustomMessage(ErrorCode);
}
private static string CustomMessage(string ErrorCode)
{
string ErrorMsg = ErrorCode;
//ErrorMsg = Translate.Item(ErrorCode); <-- My logic from database
return ErrorMsg;
}
}
Then in your Model you simply add your custom annotation (leaving out the word "Attribute"):
[Required]
[StringLength(20, MinimumLength = 4, ErrorMessage = "Password Lenght should be between 4 and 20.")]
[CustomCompare("Password", "My own message: Passwords do not match!")] // <-- Use your new Custom Attribute here
[Display(Name = "Retype Password")]
public string RePassword { get; set; }
Where the heck are these things coming from? I like them, and I would like to leverage them elsewhere in my site. It appears they only show when I do regular expression validation in model:
[Display(Name = "Residential")]
[RegularExpression(#"[-+]?[0-9]*\.?[0-9]?[0-9]", ErrorMessage = "Must be a number")]
public Byte? residentialExperience { get; set; }
<div class="editor-label row">
#Html.LabelFor(model => model.residentialExperience)
</div>
<div class="editor-field row">
#Html.EditorFor(model => model.residentialExperience)
#Html.ValidationMessageFor(model => model.residentialExperience)
</div>
How can I use these validation tooltips elsewhere? Also, how can I turn them off?
Also: It's not displaying the same message as I have in my model. It says, "Please enter a number" whereas I have written "Must be a number."
This is because you are outputting a numeric field. If you look at your HTML you will see that you have something like this:
<input type="number" ... />
By defining the type as a numbber, the browser knows what to expect and it will give you a generic message. This is part of Html 5 spec.
If you want to override the default behavior you could do this:
#Html.TextBoxFor(model => model.residentialExperience, new { #type = "text" })
I have below view model
public class QuestionarrieAnswersViewModel
{
public long QuestionID { get; set; }
public string Question { get; set; }
[Required(ErrorMessage="required")]
[StringLength(255, ErrorMessage = "Maximum 255 characters are allowed.")]
public string Answer { get; set; }
}
and i am generating view in below way
#model List<BusinessLayer.Models.ViewModel.QuestionarrieAnswersViewModel>
#using (Ajax.BeginForm("SaveQuestionarrie", "Member", FormMethod.Post, new AjaxOptions { OnBegin = "OnBegin", OnComplete = "OnComplete" }, new { #class = "form-horizontal" }))
{
for(int i=0;i<Model.Count;i++)
{
<div class="control-group">
<div class="head_form">
<label class="control-label">#Model[i].Question</label>
<div class="controls">
#Html.TextAreaFor(m=>m[i].Answer)
#Html.ValidationMessageFor(m => m[i].Answer)
#Html.HiddenFor(m=>m[i].QuestionID)
</div>
</div>
</div>
}
<div class="control-group">
<div class="controls">
<button class="btn" type="submit">Save</button>
</div>
</div>
}
I have set dataannotation on Answer field in above model but its not applying in above view while it works if i generate view in below way
#model BusinessLayer.Models.ViewModel.QuestionarrieAnswersViewModel
#using (Ajax.BeginForm("SaveQuestionarrie", "Member", FormMethod.Post, new AjaxOptions { OnBegin = "OnBegin", OnComplete = "OnComplete" }, new { #class = "form-horizontal" }))
{
#Html.TextAreaFor(m => m.Answer)
#Html.TextAreaFor(m => m.QuestionID)
<div class="control-group">
<div class="controls">
<button class="btn" type="submit">Save</button>
</div>
</div>
}
What's going wrong here...
In order to fire those validation rules, you'll need to use an EditorFor instead of a TextAreaFor.
It's because there's an outstanding issue with validation of TextArea's, see here: http://aspnet.codeplex.com/workitem/8576.
This is due to a bug in the version of jquery.validate.unobtrusive.js that was released with ASP.NET MVC3. This answer is on the same bug, the solution to this is to upgrade to the latest version of jquery.validate.unobtrusive.js - either grab it from an MVC4 project or update using NuGet.
The jquery.validate.unobtrusive.js script doesn't seem to have a version number so if you search in the script for a function called escapeAttributeValue, then this is a version of the script that has this bug fix.
The problem that is addressed in the bug fix is how to handle markup generated having name attributes containing characters that need escaping in a jQuery selector. In this case
<textarea cols="20" name="[0].Answer" rows="2"></textarea>
needs this selector
$('[name=\\[0\\]\\.Answer]')
The client-side DataAnnotation (validation) does not work for the Html.TextAreaFor() helper.
To make it work, you have to decorate the 'Answer' property with the [DataType(DataType.MultilineText)] attribute. And in the view, use Html.EditorFor() helper instead of the Html.TextAreaFor() helper mehthod.
See similar SO answer asp.net mvc TextAreaFor is not getting validated as a required field.