클라이언트 측 유효성 검사 속성을 생성하지 않는 MaxLength 속성
ASP.NET MVC3 클라이언트 측 유효성 검사에 흥미로운 문제가 있습니다. 다음과 같은 수업이 있습니다.
public class Instrument : BaseObject
{
public int Id { get; set; }
[Required(ErrorMessage = "Name is required.")]
[MaxLength(40, ErrorMessage = "Name cannot be longer than 40 characters.")]
public string Name { get; set; }
}
내 관점에서 :
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
이 필드의 텍스트 상자에 대해 생성 된 HTML은 다음과 같습니다.
<input class="text-box single-line" data-val="true" data-val-required="Name is required." id="Name" name="Name" type="text" value="">
의 흔적은 MaxLengthAttribute
없지만 다른 모든 것이 작동하는 것 같습니다.
무슨 일이 일어나고 있는지 아이디어가 있습니까?
[StringLength]
속성을 사용해보십시오 .
[Required(ErrorMessage = "Name is required.")]
[StringLength(40, ErrorMessage = "Name cannot be longer than 40 characters.")]
public string Name { get; set; }
이는 유효성 검사 목적입니다. 예를 들어 입력에 maxlength 속성을 설정하려면 이 게시물에 표시된 대로 사용자 지정 데이터 주석 메타 데이터 공급자를 작성 하고 기본 템플릿을 사용자 지정할 수 있습니다 .
이 문제를 해결하기 위해 jquery의 일부를 사용했습니다.
$("input[data-val-length-max]").each(function (index, element) {
var length = parseInt($(this).attr("data-val-length-max"));
$(this).prop("maxlength", length);
});
선택기는 data-val-length-max 속성 세트가있는 모든 요소를 찾습니다. 이것은 StringLength 유효성 검사 속성이 설정할 속성입니다.
각 루프는 이러한 일치 항목을 반복하고이 속성의 값을 구문 분석하고 설정해야하는 mxlength 속성에 할당합니다.
문서 준비 기능에 이것을 추가하기 만하면됩니다.
MaxLengthAttribute
MVC 5.1 업데이트 이후 작동 중 : 변경 사항
MVC 4에서 입력 유형 텍스트에서 maxlenght를 원하십니까? 당신은 할 수 있습니다!
@Html.TextBoxFor(model => model.Item3.ADR_ZIP, new { @class = "gui-input ui-oblig", @maxlength = "5" })
그의 대답에 대한 @ Nick-Harrison의 소품 :
$("input[data-val-length-max]").each(function (index, element) {
var length = parseInt($(this).attr("data-val-length-max"));
$(this).prop("maxlength", length);
});
parseInt ()가 무엇인지 궁금합니다. 나는 문제없이 이것을 단순화했습니다 ...
$("input[data-val-length-max]").each(function (index, element) {
element.setAttribute("maxlength", element.getAttribute("data-val-length-max"))
});
나는 Nicks 답변에 대해 언급했지만 아직 충분한 담당자가 없습니다.
나는 이와 동일한 문제가 있었고 내 뷰 모델에서 IValidatableObject 인터페이스를 구현하여 해결할 수있었습니다.
public class RegisterViewModel : IValidatableObject
{
/// <summary>
/// Error message for Minimum password
/// </summary>
public static string PasswordLengthErrorMessage => $"The password must be at least {PasswordMinimumLength} characters";
/// <summary>
/// Minimum acceptable password length
/// </summary>
public const int PasswordMinimumLength = 8;
/// <summary>
/// Gets or sets the password provided by the user.
/// </summary>
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
/// <summary>
/// Only need to validate the minimum length
/// </summary>
/// <param name="validationContext">ValidationContext, ignored</param>
/// <returns>List of validation errors</returns>
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
var errorList = new List<ValidationResult>();
if ((Password?.Length ?? 0 ) < PasswordMinimumLength)
{
errorList.Add(new ValidationResult(PasswordLengthErrorMessage, new List<string>() {"Password"}));
}
return errorList;
}
}
The markup in the Razor is then...
<div class="form-group">
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password, new { @class = "form-control input-lg" }
<div class="password-helper">Must contain: 8 characters, 1 upper-case, 1 lower-case
</div>
@Html.ValidationMessagesFor(m => m.Password, new { @class = "text-danger" })
</div>
This works really well. If I attempt to use [StringLength] instead then the rendered HTML is just not correct. The validation should render as:
<span class="text-danger field-validation-invalid field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true"><span id="Password-error" class="">The Password should be a minimum of 8 characters long.</span></span>
With the StringLengthAttribute the rendered HTML shows as a ValidationSummary which is not correct. The funny thing is that when the validator fails the submit is still blocked!
StringLength
works great, i used it this way:
[StringLength(25,MinimumLength=1,ErrorMessage="Sorry only 25 characters allowed for
ProductName")]
public string ProductName { get; set; }
or Just Use RegularExpression
without StringLength:
[RegularExpression(@"^[a-zA-Z0-9'@&#.\s]{1,25}$", ErrorMessage = "Reg Says Sorry only 25
characters allowed for ProductName")]
public string ProductName { get; set; }
but for me above methods gave error in display view, cause i had already ProductName field in database which had more than 25 characters
so finally i came across this and this post and tried to validate without model like this:
<div class="editor-field">
@Html.TextBoxFor(model => model.ProductName, new
{
@class = "form-control",
data_val = "true",
data_val_length = "Sorry only 25 characters allowed for ProductName",
data_val_length_max = "25",
data_val_length_min = "1"
})
<span class="validation"> @Html.ValidationMessageFor(model => model.ProductName)</span>
</div>
this solved my issue, you can also do validation manually using jquery or using ModelState.AddModelError
hope helps someone.
I know I am very late to the party, but I finaly found out how we can register the MaxLengthAttribute
.
First we need a validator:
public class MaxLengthClientValidator : DataAnnotationsModelValidator<MaxLengthAttribute>
{
private readonly string _errorMessage;
private readonly int _length;
public MaxLengthClientValidator(ModelMetadata metadata, ControllerContext context, MaxLengthAttribute attribute)
: base(metadata, context, attribute)
{
_errorMessage = attribute.FormatErrorMessage(metadata.DisplayName);
_length = attribute.Length;
}
public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
{
var rule = new ModelClientValidationRule
{
ErrorMessage = _errorMessage,
ValidationType = "length"
};
rule.ValidationParameters["max"] = _length;
yield return rule;
}
}
Nothing realy special. In the constructor we save some values from the attribute. In the GetClientValidationRules
we set a rule. ValidationType = "length"
is mapped to data-val-length
by the framework. rule.ValidationParameters["max"]
is for the data-val-length-max
attribute.
Now since you have a validator, you only need to register it in global.asax
:
protected void Application_Start()
{
//...
//Register Validator
DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MaxLengthAttribute), typeof(MaxLengthClientValidator));
}
Et voila, it just works.
I tried this for all the inputs in my html document(textarea,inputs,etc) that had the data-val-length-max property and it works correctly.
$(document).ready(function () {
$(":input[data-val-length-max]").each(function (index, element) {
var length = parseInt($(this).attr("data-val-length-max"));
$(this).prop("maxlength", length);
});
});
This can replace the MaxLength and the MinLength
[StringLength(40, MinimumLength = 10 , ErrorMessage = "Name cannot be longer than 40 characters and less than 10")]
<input class="text-box single-line" data-val="true" data-val-required="Name is required."
id="Name1" name="Name" type="text" value="">
$('#Name1').keypress(function () {
if (this.value.length >= 5) return false;
});
'Development Tip' 카테고리의 다른 글
부트 스트랩 중심 제목 (0) | 2020.10.15 |
---|---|
선택기 'touchesBegan : withEvent :'로 메서드를 재정의하면 호환되지 않는 유형 '(NSSet, UIEvent)-> ()'가 있습니다. (0) | 2020.10.15 |
Android 4.0에서 Holo 테마의 기본 색상 값은 무엇입니까? (0) | 2020.10.15 |
ALTER TABLE, null이 아닌 열에 null 설정, PostgreSQL 9.1 (0) | 2020.10.15 |
Gradle 버전 2.2가 필요합니다. (0) | 2020.10.15 |