用户输入值后,仅为控件清除验证消息

时间:2017-04-21 12:51:11

标签: asp.net-mvc-5

一旦用户在文本框中输入了一些charectors,我就需要清除文本框的验证消息。我需要对组合框执行相同的操作,只要用户选择下拉值,错误消息就应该清除

如何使用jquery

进行处理
$('#ProjectContent').keypress(function () {
        resetValidation();

    });



    function resetValidation() {



    }

文本框

<div class="form-group">
                    @Html.LabelFor(model => model.ProjectContent, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-8">
                        @Html.TextAreaFor(model => model.ProjectContent, new { htmlAttributes = new { @class = "form-control", cols = "50" } })
                        @Html.ValidationMessageFor(model => model.ProjectContent, "", new { @class = "text-danger" })
                    </div>
                </div>

组合框

<div class="form-group">
                @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-8">
                    <div class="editor-field">
                        @(Html.Kendo().ComboBoxFor(model => model.CountryCode)
                        .HtmlAttributes(new { style = "width:100%" })
                        .DataTextField("CompanyCodeCompany")
                        .DataValueField("CountryCode")
                        .Filter("contains")
                        .MinLength(3)
                        .Events(e => e.DataBound("onCompanyComboChange"))
                        .Value(@user.DefaultCountryCode)
                        .DataSource(dataSource => dataSource
                        .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
                        .ServerFiltering(true)
                        )
                        )
                    </div>
                    @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
                </div>
            </div>

2 个答案:

答案 0 :(得分:1)

假设您有TextAreaFor和Kendo ComboBoxFor并且ValidationMessageFor包含在HTML div元素中,如下例所示:

<div class="col-md-8">
    @Html.TextAreaFor(model => model.ProjectContent, new { htmlAttributes = new { @class = "form-control", cols = "50" }})
    <div id="message1">
        @Html.ValidationMessageFor(model => model.ProjectContent, "", new { @class = "text-danger" })
    </div>
</div>

<!-- other stuff -->

<div class="editor-field">
    @(Html.Kendo().ComboBoxFor(model => model.CountryCode)
    .Name("CountryCode")
    .HtmlAttributes(new { style = "width:100%" })
    .DataTextField("CompanyCodeCompany")
    .DataValueField("CountryCode")
    .Filter("contains")
    .MinLength(3)
    .Events(e => e.DataBound("onCompanyComboChange"))
    .Value(@user.DefaultCountryCode)
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
    .ServerFiltering(true)
    ))
</div>
<div id="message2">
    @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
</div>

要单独隐藏与ComboBoxFor对应的验证邮件,您可以使用id div的名称在执行keypress时隐藏它:

$(document).ready(function() {
    $('#CountryCode').data('kendoComboBox').input.keypress(function() {
         resetComboValidation(); 
    });

    function resetComboValidation() {
        $("#message2").hide();
    }
});

此外,您可以使用显示的jQuery attributeStartsWith selector隐藏包含在div元素中的多个验证消息,这些元素的id属性值以message开头(或您为其指定的任何名称)下面:

$(document).ready(function() {
    // TextAreaFor
    $('#ProjectContent').keypress(function() {
        resetValidation();
    });

    // ComboBoxFor
    $('#CountryCode').data('kendoComboBox').input.keypress(function() {
        resetValidation(); 
    });

    // hide validation messages
    function resetValidation() {
        $('div[id^="message"]').hide();
    }
});

注意:attributeStartsWith选择器也适用于使用相同名称的所有div元素,即<div id="message">@Html.ValidationMessageFor(...)</div>以包装所有ValidationMessageFor应该有效。此外,keypress使用的ComboBoxFor事件可以由包含bind的{​​{1}}代替,如下所示:

keypress

参考:

kendo.ui.ComboBox JavaScript API (jQuery)

答案 1 :(得分:0)

我认为您必须在文本区域/组合框中指定name / id html属性才能执行按键事件。

[compiler] sudo apt-get install build-essential
[required] sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev
[optional] sudo apt-get install python-dev python-numpy libtbb2 libtbb-dev libjpeg-dev libpng-dev libtiff-dev libjasper-dev libdc1394-22-dev

如果仍然无法正常写入事件内联,如下所示

@Html.TextAreaFor(model => model.ProjectContent, new { htmlAttributes = new { @name="ProjectContent",@class = "form-control", cols = "50" }})