Question

我正在尝试利用HTML.ValidationMessage（）元素来编写使用jQuery的自定义客户端验证。这甚至可能吗？我的服务器端验证是使用HTML.ValidationMessage（）显示的，我想知道如何在表单提交之前访问该元素以使用jQuery显示自定义消息。

我知道有一些插件可以用来做这些事情，但我真的希望完全控制我的验证。

这是我目前的一些Javascript代码。基本上它在提交时将输入元素的验证“类”添加，但不确定如何访问Html.ValidationMessage以输出类似“需要电子邮件”的内容。

    <script type="text/javascript">
    $(document).ready(function() {
        $("input[type=submit]").click(function() {

            var valid = true;

            // email blank
            if ($("input[name='email']").val().length < 1) {
                $("input[name='email']").addClass("input-validation-error");
                valid = false;
            }

            return valid;
        })
    });

</script>

视图中的代码：

       <p>
            <label for="email">
                Email:</label>
            <%= Html.TextBox("email") %>
            <%= Html.ValidationMessage("email") %>
        </p>

Answer 1

您可以编写大量代码来执行此操作。或者您可以使用xVal，这是免费的，并且正是如此，还有更多。在您的.NET类型上添加值注释，向您的aspx添加几个简单的东西，并且您可以免费获得jQuery验证。此外，它还提供了流行框架的提供程序，如果您需要更复杂的验证，它可以进行定制。

我认为没有必要在这里重新发明轮子。

Answer 2

将jquery表单validation plugin用于客户端是不是一个想法？它很容易在视图代码中实现。您在输入框中添加了一些标签，并在标题中添加了几行javascript，您就完成了。当然，你仍然需要对任何“非常习惯”的东西进行编码。

Answer 3

如果您将消息静态放入页面并将其显示设置为“none”，则可以在更改输入字段的类的同时显示该消息。

    <p>
        <label for="email">
            Email:</label>
        <%= Html.TextBox("email") %><span style="display:none" class="email-error">Email required</span>
        <%= Html.ValidationMessage("email") %>
    </p>

然后在你的JS中添加这一部分下的这一行：

        if ($("input[name='email']").val().length < 1) {
            $("input[name='email']").addClass("input-validation-error");
            valid = false;
        }

到此：

        if ($("input[name='email']").val().length < 1) {
            $("input[name='email']").addClass("input-validation-error");
            $("span.email-error").show();
            valid = false;
        }

你可能需要一些CSS来相应地定位这些东西，但在功能上它应该做你想要的。

编辑：

为避免额外的标记替换：

$("span.email-error").show();

使用：

$("input[name='email']").after('<span style="display:none" class="email-error">Email required</span>');

Answer 4

创建一个ValidatedTextBox的HtmlHelper。我已经使用我的模型上的反射完成了这一点，创建了一个完全动态的jQuery与验证集成，但更简单的版本将像这样工作（这可能会工作，但未经测试，因为它）。一个好的开始：

public static MvcForm BeginClientValidatedForm(this HtmlHelper helper, string formId)
{
    HttpResponseBase response = helper.ViewContext.HttpContext.Response;
    if (helper.ViewData.ModelState.IsValid)
    {
        response.Write("<ul class=\"validation-summary-errors\"></ul>\n\n");
    }

    response.Write(ClientValidationHelper.GetFormValidationScript(formId));
    response.Write("\n");

    // Inject the standard form into the httpResponse.
    var builder = new TagBuilder("form");
    builder.Attributes["id"] = formId;
    builder.Attributes["name"] = formId;
    builder.Attributes["action"] = helper.ViewContext.HttpContext.Request.Url.ToString();
    builder.Attributes["method"] = HtmlHelper.GetFormMethodString(FormMethod.Post);
    response.Write(builder.ToString(TagRenderMode.StartTag));

    return new MvcForm(response);
}

相应的“GetFormValidationScript”：

public static string GetFormValidationScript(string formId)
  {
    string scriptBlock =
    @"<script type=""text/javascript"">
    $(document).ready(function() {{
      $(""#{0}"").validate({{
        meta:""rules"",
        onkeyup:false,
        onfocusout:false,
        onclick:false,
        errorClass:""input-validation-error"",
        errorElement:""li"",
        errorLabelContainer:""ul.validation-summary-errors"",
        showErrors: function(errorMap, errorList) {{
            $(""ul.validation-summary-errors"").html("""");
            this.defaultShowErrors();
      }}";

      // etc...this is the standard jQuery.validate code.

      return string.Format(scriptBlock, formId);


  }

public static string ClientValidatedTextbox(this HtmlHelper htmlHelper, string propertyName, IDictionary<string, object> htmlAttributes, string validationType)
{
    var cssClassBuilder = new StringBuilder();
    cssClassBuilder.Append("text ");
    if (htmlAttributes == null)
    {
        htmlAttributes = new Dictionary<string, object>();
    }
    else if(htmlAttributes.ContainsKey("class"))
    {
        cssClassBuilder.Append(htmlAttributes["class"]);
    }

    switch validationType
    {
      case "email":
        cssClassBuilder.Append(" {rules: {email: true, messages: {email: 'A valid email is required.'}} } ");
        break;
    }

    htmlAttributes["class"] = cssClassBuilder.ToString();

    return htmlHelper.TextBox(propertyName, htmlAttributes);
}

使用Html.ValidationMessage使用jQuery进行ASP.NET MVC客户端验证？

4 个答案: