jquery.validate 意外“未突出显示”电子邮件输入类型答案

【问题标题】：Email input types unexpectedly "unhighlighted" by jquery.validatejquery.validate 意外“未突出显示”电子邮件输入类型
【发布时间】：2015-04-24 07:23:00
【问题描述】：

我有以下模型（简化），注意Email 和Text 都不是Required 字段：

public class MyModel
{
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    public string Text { get; set; }
}

还有以下观点：

@model MyModel

@using (Html.BeginForm)
{
    @Html.EditorFor(m => m.Email)
    @Html.EditorFor(m => m.Text)

    <button id="my-button" type="button">Button</button>
}

我想在点击#my-button 时触发客户端验证，所以我有以下事件处理程序：

$(function() {
    $('#my-button').click(function() {
        $('form').valid();
    });
});

到目前为止一切顺利。我遇到的唯一问题是，当用户打开表单并单击按钮而不填写任何内容时，我不希望 input[type="email"] 字段为 unhighlighted，因为这与其他 input[type="text"] 字段的行为相矛盾不是unhighlighted。

这可能吗？

【问题讨论】：

如果您希望输入为空时无效，则需要 [Required] 属性。
@StephenMuecke 实际上我想要相反的行为，我希望inputs 在单击button 时保持中立（即不是unhighlighted，想不出更好的术语） , 除非输入了值

标签： javascript jquery asp.net-mvc jquery-validate unobtrusive-validation

【解决方案1】：

您应该使用以下设置。有了这个，您可以在文档加载时调用valid()，这将立即突出显示表单，直到您在字段中输入值。

类（注意[Required] 属性）：

public class MyModel
{
    [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Required]
    public string Text { get; set; }
}

观点：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)    
    @Html.EditorFor(m => m.email)
    @Html.ValidationMessageFor(m => m.email)

    @Html.EditorFor(m => m.Text)
    @Html.ValidationMessageFor(m => m.Text)

    <button>Submit</button>
}

这将使用通过您的模型链接的 jQuery Unobtrusive Validation 包来验证表单。如果需要，可以通过 NuGet 中的以下 id 获取包：

jQuery.Validation

Microsoft.jQuery.Unobtrusive.Validation

作为旁注，如果您需要验证电子邮件地址字段条目是否为真实电子邮件地址的能力，请尝试在 NuGet 中使用以下包 dataannotationsextensions。另见：http://dataannotationsextensions.org

这将允许您向模型添加更多属性信息，例如：

    [Required]
    [Email]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

（可能有更多的包可以进行上述电子邮件验证）

如果在视觉上该字段未按预期突出显示，请检查 CSS 文件以确保 input[type=email] 和 input[type=text] 被覆盖

【讨论】：

我的表单中不需要这两个字段，我已经更新了我的问题

【解决方案2】：

如果单击按钮后输入中没有任何值，请关注您的输入

 $('#my-button').on('click', function() {
        var $input = $('input[type=email]');
        if ($input.val()) {
            $form.valid();
        } else {
            $input.focus();
        }
    });

【讨论】：

这不能回答我的问题