Question

我正在研究ASP.NET MVC5应用程序。我的表单是部分视图，并使用jQuery ajax post函数将数据发送回控制器。现在我想验证单个字段作为用户在其中输入数据。我到目前为止管理但我可以使用每个字段的css id进行验证，但是我想检查$ this输入字段，因为用户更改了它的值？

$(function () {

    jQuery.validator.unobtrusive.parse();

    jQuery.validator.unobtrusive.parse("#CreateStudentProfileForm");


});



$(document).ready(function () {

    $("#CreateStudentProfileForm").on('input', function () {


        var v = $("#CreateStudentProfileForm").validate().element("#StudentNumber_UWLID");

        alert("va   " + v);
    });

});

razor form

@using (Html.BeginForm("CreateStudentProfile", "StudentProfile", FormMethod.Post, new { id = "CreateStudentProfileForm" }))

{
  @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Student</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.StudentNumber_UWLID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.StudentNumber_UWLID, new { htmlAttributes = new { id = "StudentNumber_UWLID", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.StudentNumber_UWLID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.OtherTitle, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.OtherTitle, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.OtherTitle, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.MiddleName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Nationality, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Nationality, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Nationality, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control datepicker" } })
            @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

Answer 1

$("#CreateStudentProfileForm").on('input', function () {...

AFAIK，input不是有效的事件。请参阅：api.jquery.com/category/events/

使用change或keyup查看输入值是否已更改或正在更改。

$("#myinput").on('change', function () {...

... OR

$("#myinput").on('keyup', function () {...

或两者......

$("#myinput").on('change keyup', function () {...

您也无法将事件附加到表单对象。如果要查看特定input是否已更改，则必须将其附加到输入。否则，您可以使用each()检查所有内容......

$('input[type="text"]').each(function() {
    $(this).on('change', function() { ....

HOWEVER ，jQuery Validate插件已经检查了由各种事件自动触发的每个字段。目前还不清楚为什么要编写处理程序再次检查它们。无论您需要做什么，都可以通过the various .validate() options中的一个或多个来完成。

请注意，不显眼的验证插件会根据您的数据属性自动构建对.validate()的调用（这就是为什么它被称为＆＃34;不显眼的＆＃34; ）。因此，您的框架会自动调用.validate()，并且由于仅使用了对.validate()的第一次调用，因此将忽略对.validate()的所有后续调用。因此，为了更改任何.validate()选项，您必须使用the plugin's .setDefaults() method。

ASP.NET-MVC 5使用jQuery-客户端验证来验证单个输入字段

razor form

1 个答案: