ビューモデルを使用して.NET MVC3に次のものがあります。Razor と FluentValidation を使用しています (ただし、同じ結果で DataAnnotations も試しました)。
ビューから:
@Html.DropDownListFor(model=>model.L2, Model.RegisteredL2s, "[Select One]")
コントローラーから:
[HttpGet]
[Authorize(Roles = "Supervisor")]
public ActionResult Edit(string siteId, bool? isNew)
{
SiteEditViewModel model = new SiteEditViewModel();
List<SelectListItem> items = RegisteredL2Repository.GetRegisteredL2List()
.Select(x => new SelectListItem() { Text = x.L2, Value = x.L2.Trim() })
.OrderBy(x => x.Text)
.ToList();
model.RegisteredL2s = items.AsEnumerable();
if(!isNew.HasValue)
{
model.IsNew = false;
}
if(isNew.HasValue && (bool)isNew)
{
model.IsNew = true;
return View(model);
}
if(model.IsNew)
{
return View(model);
}
model.ConvertModelToViewModel(SiteRepository.GetSite(siteId));
return View("Edit", model);
}
}
ViewModel から:
[DisplayName("Site:")]
[TextboxLength(2)]
public virtual string SiteId { get; set; }
[DisplayName("L2:")]
public virtual string L2 { get; set; }
[DisplayName("Description:")]
[TextboxLength(50)]
public virtual string Description { get; set; }
public IEnumerable<SelectListItem> RegisteredL2s { get; set; }
public bool IsNew { get; set; }
public string OverallError { get; set; }
私の Validator クラス (Fluent) から:
public SiteEditValidator()
{
RuleFor(model => model.SiteId)
.NotEmpty()
.WithMessage("Site is required.")
.Length(2)
.WithMessage("Site must be 2 characters. Ex: 1C")
.Matches(@"^[0-9A-Za-z]{2}$")
.WithMessage("Site contains invalid characters. Only letters and numbers.");
RuleFor(model => model.L2)
.NotEmpty()
.WithMessage("L2 is required.")
.Length(2)
.WithMessage("L2 must be 2 characters. Ex: 30")
.Matches(@"^[\d]{2}$")
.WithMessage("L2 contains invalid characters. Only numbers are allowed.");
RuleFor(model => model.Description)
.NotEmpty()
.WithMessage("Description is required.")
.Length(3, 50)
.WithMessage("Description must be at least 3 characters and not more than 50.")
.Matches(@"^[\w\,\.\'\-\s]{3,50}$")
.WithMessage("Description contains some invalid characters.");
}
そして生成された HTML:
<div class="Edit-Field">
<div class="Edit-Field-Label" style="width: 5em">
<label for="SiteId">Site:</label>
</div>
<div class="Editor-For">
<input autocomplete="off" data-val="true" data-val-length="Site must be 2 characters. Ex: 1C" data-val-length-max="2" data-val-length-min="2" data-val-regex="Site contains invalid characters. Only letters and numbers." data-val-regex-pattern="^[0-9A-Za-z]{2}$" data-val-required="Site is required." id="SiteId" maxlength="2" name="SiteId" readonly="readonly" style="width: 2.5em; background-color: LightGrey" type="text" value="30" />
<div class="Validation-For">
<span class="field-validation-valid" data-valmsg-for="SiteId" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="Edit-Field">
<div class="Edit-Field-Label" style="width: 5em">
<label for="L2">L2:</label>
</div>
<div class="Editor-For">
<select data-val="true" data-val-length="L2 must be 2 characters. Ex: 30" data-val-length-max="2" data-val-length-min="2" data-val-regex="L2 contains invalid characters. Only numbers are allowed." data-val-regex-pattern="^[\d]{2}$" data-val-required="L2 is required." id="L2" name="L2"><option value="">[Select One]</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
</select>
<div class="Validation-For">
<span class="field-validation-valid" data-valmsg-for="L2" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="Edit-Field">
<div class="Edit-Field-Label" style="width: 5em">
<label for="Description">Description:</label>
</div>
<div class="Editor-For">
<input autocomplete="off" data-val="true" data-val-length="Description must be at least 3 characters and not more than 50." data-val-length-max="50" data-val-length-min="3" data-val-regex="Description contains some invalid characters." data-val-regex-pattern="^[\w\,\.\'\-\s]{3,50}$" data-val-required="Description is required." id="Description" maxlength="50" name="Description" style="width: 30em" type="text" value="Central Office-Cash Receipts Unit" />
<div class="Validation-For">
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
</div>
</div>
今問題：
事前入力された IEnumerable (RegisteredL2s) から L2 フィールドを描画し、それをドロップダウンリスト (ID=L2、html のほぼ中央) として持っています。L2 は必須で、特定の長さ (2) である必要があります。私の問題は、ユーザーが [Select One] 以外のものを選択した場合でも、長さエラーが表示されることです。そのエラーを削除すると、正規表現エラーが表示されます。送信時のサーバー側の検証は正しく機能します。なぜこれを行うのですか、どうすれば停止できますか? または、この 1 つのフィールドのクライアント側をオフにすることはできますか?
更新: jquery.validate.js に問題があると思います...誰かに確認してもらいたいです。
これは私が変更した元のコード行で、問題が解決したようです: これは 683 行目です。686 行目は問題点です。
getLength: function(value, element) {
switch( element.nodeName.toLowerCase() ) {
case 'select':
return $("option:selected", element).length; case 'input':
if( this.checkable( element) )
return this.findByName(element.name).filter(':checked').length;
}
return value.length;
},
長さバリデーターも存在する必要なドロップダウン値がある場合、エラーが発生すると思います。コードを実行すると、この行の長さは 2 ではなく 1 を返します。太字の行を変更すると、return $("option:selected", element).val().length;正しく機能します。これが適切なバグであるかどうか、および私の修正が jquery.validation の他の部分に干渉しないかどうかについてのコメントは役に立ちます。
これは jquery.validation 1.8.1 からのものです (バージョンが同期していない可能性があると考えたため、1.7 から更新されました) Jquery = 1.6.1.
更新 2: これが正確な答えであるかどうかはわかりませんが、
rangelength の JQuery.Validation ドキュメント (正確に 2 の長さに対して jquery.validation.unobtrusive が構築するもの)によると、ここでは、選択 (ドロップダウンリスト) の場合、特定の数のアイテムが確実に処理されるようにするためのものであることがわかります。値の長さを検証するために選択されていません。
サーバー側の検証を保持しながら、この特定のアイテムのクライアント側で値の長さを確認するか、検証をオフにした後です。