將表單驗證放在剃鬚刀引擎中的html控件上

我一直面臨着將表單驗證放在html控件上的問題任何人都指導我如何解決這個問題？將表單驗證放在剃鬚刀引擎中的html控件上

我的HTML場something.cshtml

<input type="text" id="AccidentDate" name="AccidentDate" /> 
@Html.ValidationMessage("AccidentDate")

控制器代碼：

[HttpPost] 
[AllowAnonymous] 
public ActionResult Index(Models.c objC) 
{ 
    if (String.IsNullOrEmpty(objC.AccidentDate)) 
    { 
     ModelState.AddModelError("AccidentDate", "*"); 
    } 

    return View(objClaimant); 
    }

請注意validationMessage確實在*在前期即輸入字段的形式籌集錯誤但我的要求是將輸入字段突出顯示爲紅色。

最重要的是我知道，如果我使用： @Html.TextBox("AccidentDate", Model.AccidentDate);它完美，但使用這不是我的要求。

最後，我期待通過任何其他方式使html輸入字段紅色，如果驗證消息被提出。

任何幫助，將不勝感激。

來源

2013-04-05 UMAR

您需要重新輸入所有不顯眼的驗證屬性。放入@ Html.TextBox（「AccidentDate」，Model.AccidentDate）;查看源代碼，剪切並粘貼？ – Liam 2013-04-05 11:39:46

此外，這些屬性將取決於您放在模型上的驗證屬性，所以您想驗證什麼？ – Liam 2013-04-05 11:44:25

另外我假設你想使用不顯眼的驗證引擎？ – Liam 2013-04-05 11:45:43

好的，所以，而不僅僅是評論我想我會嘗試和幫助。所以我假設你想，如果你做

@Html.TextBox("AccidentDate", Model.AccidentDate);

，並查看源代碼，你會看到類似使用unobtrusive validation engine

所以：

<input data-val="true" data-val-required="The AccidentDate field is required." 
    id="AccidentDate" name="AccidentDate" type="text" value="">

因此，重要的是要注意的data-val屬性。這些基本上告訴不顯眼的引擎，「這個領域有待進一步驗證，這是如何，什麼顯示如果失敗」

因此，要做到這一點沒有@Html.TextBox該做這一切爲你，你會需要自己在HTML中創建這些屬性。

快速的骯髒的解決方案，把你的@HTML.TextBox中，運行代碼，切斷&粘貼HTML。可能不是你想要的？

編輯你想所需的驗證，因此，上述data-val="true" data-val-required="The AccidentDate field is required."屬性是你所需要的，顯然用您自己的錯誤消息

這樣：

<input type="text" id="AccidentDate" name="AccidentDate" 
    data-val="true" data-val-required="The AccidentDate field is required." /> 
@Html.ValidationMessage("AccidentDate")

CSS類

應該應用Css類。相關的一段代碼是：

function onError(error, inputElement) { // 'this' is the form element 
     var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"), 
      replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false; 

     container.removeClass("field-validation-valid").addClass("field-validation-error"); 
     error.data("unobtrusiveContainer", container); 

     if (replace) { 
      container.empty(); 
      error.removeClass("input-validation-error").appendTo(container); 
     } 
     else { 
      error.hide(); 
     } 
    }

裏面的jquery.validate.unobtrusive.js。確認你引用這個js文件並查看上面的代碼是否被打中？

來源

2013-04-05 11:52:24 Liam

我已經把這兩個屬性放在輸入字段中，但是它沒有對輸入字段進行高亮處理：原因是它對它沒有任何影響，但是驗證消息像前面一樣引發。進一步查看詳細信息，我知道它不會在出現錯誤時在該字段上放置「field-validation-error」css，這就是原因。 – UMAR 2013-04-05 12:30:17

這是奇怪的，代碼要做到這一點都應該包含在unobtrusive.js腳本 – Liam 2013-04-05 12:59:48

你將使用'@using（Html.BeginForm（））'您的形式？ – Liam 2013-04-05 13:02:00

將表單驗證放在剃鬚刀引擎中的html控件上

回答

相關問題