Проверка клиента ASP.NET MVC с помощью jQuery с использованием Html.ValidationMessage?

Question

Я пытаюсь подключиться к элементу HTML.ValidationMessage (), чтобы написать действительно настраиваемую проверку на стороне клиента с помощью jQuery. Это вообще возможно? Моя проверка на стороне сервера отображается с использованием HTML.ValidationMessage (), и мне интересно, как бы я получил доступ к этому элементу для отображения настраиваемого сообщения с помощью jQuery перед отправкой формы.

Я знаю, что есть несколько плагинов для некоторых из этих вещей, но мне бы очень хотелось получить полный контроль с моей валидацией.

Вот немного кода Javascript, который у меня есть в настоящее время. В основном он добавляет проверочный «класс» к элементу ввода при отправке, однако не уверен, как получить доступ к Html.ValidationMessage для вывода чего-то вроде «Email required».

    <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 плагин проверки для клиентской части? Это легко реализовать в представлении кода. Вы добавляете несколько тегов в поля ввода и добавляете несколько строк 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 для позиционирования этого материала, но функционально он должен делать то, что вы хотите.

EDIT:

Чтобы избежать дополнительной разметки, замените:

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

с:

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

Answer 4

Создайте HtmlHelper, который является ValidatedTextBox. Я сделал это, используя отражение в моих моделях, создав полностью динамическую интеграцию 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);
}