| Branch | Status |
|---|---|
| master-v7 | |
| dev-v7 |
Contains model validation attributes to for your properties, by using umbraco dictionary as the resource for error messages.
This branch is for Umbraco 7. Looking for Umbraco 8?
During installation the keys will be created nested below DataAnnotions dictionary key.
NuGet:
PM > Install-Package Our.Umbraco.DataAnnotations
Build the project and start website.
On first run, a migration will check foreach dictionary key used in the application and added it to umbraco dictionary items.
Only default en-US keys and translations are added.
Include the following scripts in your layout .cshtml file
<body>
@RenderBody()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
</body>
or using ClientDependency like so:
@using ClientDendency.Core.Mvc;
...
<body>
@RenderBody()
@{
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js")
Html.RequiresJs("https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js")
}
@Html.RenderJsHere()
</body>
The above is just samples, you may use any method you like to include the scripts.
Then on each page with a form enable validation
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
The end result for a page with validation could look like:
@inherits UmbracoViewPage<LoginModel>
@using UmbracoBootstrap.Web.Models;
@using UmbracoBootstrap.Web.Controllers;
@{
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
}
@using (Html.BeginUmbracoForm<MemberController>("HandleLogin", null, new { @role="form", @class="" }, FormMethod.Post))
{
@Html.ValidationSummary("loginModel", true)
<div class="form-group">
@Html.LabelFor(m=> m.Username, new { @class="control-label" })
@Html.TextBoxFor(m => m.Username, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Username)
</div>
<div class="form-group">
@Html.LabelFor(m=> m.Password, new { @class="control-label" })
@Html.PasswordFor(m => m.Password, new {
@class = "form-control form-control-appended",
@placeholder = Umbraco.GetDictionaryValue("EnterYourPassword", "Enter your password")
})
@Html.ValidationMessageFor(m => m.Password)
</div>
@Html.HiddenFor(m=> m.RedirectUrl)
<button type="submit" role="button">@Umbraco.GetDictionaryValue("SignIn", "Sign in")</button>
}Decorate your properties with the following attributes
- UmbracoCompare
- UmbracoDisplayName
- UmbracoEmailAddress
- UmbracoMinLength
- UmbracoMaxLength
- UmbracoStringLength
- UmbracoMustBeTrue
- UmbracoPassword
- UmbracoRegularExpression
- UmbracoRequired
How to use:
[UmbracoRequired]
public string MyProperty { get; set; } | Key | Default |
|---|---|
EqualToError |
The '{0}' and '{1}' field fields must match. |
Example:
[UmbracoDisplayName(nameof(Password))]
[DataType(DataType.Password)]
public string Password { get; set; }
[UmbracoDisplayName(nameof(ConfirmPassword))]
[UmbracoRequired]
[UmbracoCompare(nameof(Password))]
[DataType(DataType.Password)]
public string ConfirmPassword { get; set; }| Key | Default |
|---|---|
| Provied key | Must be created by your self. |
Example:
[UmbracoDisplayName(nameof(Username))]
[UmbracoRequired]
public string Username { get; set; }| Key | Default |
|---|---|
| EmailError | Doesn't look like a valid e-mail. |
Example:
[UmbracoEmailAddress(DictionaryKey = "MyCustomKey")]
public string Email { get; set; }| Key | Default |
|---|---|
| MinLengthError | Must not exceed {1} characters. |
Example:
[UmbracoMinLength(20, DictionaryKey = "MyCustomKey")]
property string MyProperty { get; set; }| Key | Default | Description |
| -- | -- |
| MaxLengthError | Must not exceed {1} characters.
Example:
[UmbracoMaxLength(120, DictionaryKey = "MyCustomKey")]
property string MyProperty { get; set; }| Key | Default | Description |
|---|---|---|
| MaxLengthError | Must not exceed {1} characters. |
Used when only MaximumLength is defined. |
| MinMaxLengthError | Must not be less than {1} and greather than {1} characters. |
Used when both MaximumLength and MinimumLength is defined. |
Example:
[UmbracoStringLength(120, MinimumLength = 30, DictionaryKey = "MyCustomKey")]
property string Message { get; set; }| Key | Default |
| -- | -- | -- |
| MustBeTrueError | {0} is required. |
Example:
[UmbracoMustBeTrue(DictionaryKey = "MyCustomKey")]
property boool Consent { get; set; }| Key | Default | Description |
|---|---|---|
| PasswordError | Must be at least {1} characters long and contain {2} symbol (!, @, #, etc). |
Used when only MaximumLength is defined. |
| MinPasswordLengthError | Must be at least {1} characters. |
Used when only MaximumLength is defined. |
| MinNonAlphanumericCharactersError | Must contain at leat {2} symbol (!, @, #, etc). |
|
| PasswordStrengthError | Must be at least {1} characters long and contain {2} symbol (!, @, #, etc). |
Example:
[UmbracoPassword(DictionaryKey = "CustomPasswordKey",
MinPasswordLengthDictionaryKey = "CustomMinPasswordLengthKey",
MinNonAlphanumericCharactersDictionaryKey = "MyCustomMinNonAlphanumericCharactersKey",
PasswordStrengthDictionaryKey = "MyCustomPasswordStrengtKey",
PasswordStrengthRegexTimeout = 360)]
property string Password { get; set; }There are no default keys for this attribute, since each regex validation is unique
Example:
[UmbracoRegularExpression("^([0-9]{4})$", DictionaryKey = "MyCustomRegexKey")]
property string Password { get; set; }Example:
[UmbracoRequired(DictionaryKey = "MyCustomRequiredKey")]
property string MyProperty { get; set; }Each Attribute, has a public property DictionaryKey which can be set like this:
[UmbracoReguired(DictionaryKey = "MyCustomKey")]
[UmbracoRegularExpression(DictionaryKey = "MyCustomRegexKey")]
[UmbracoRegularExpression(DictionaryKey = "MyCustomRegexKey")]
property string MyProperty { get; set; }
Not setting a custom key, will fallback to the default dictionary key.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent