Question

我有以下形式的剃须刀

@using (Ajax.BeginForm(new AjaxOptions { }))
{
    <div id="frm" style="visibility:hidden">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="submit" value="Save" class="btn btn-success" id="save"/>
                <input type="submit" value="close" class="btn btn-success" id="close"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>
}

当我单击表单隐藏的close按钮时，验证应该被清除。但验证清除部分不起作用...如何通过单击close按钮清除验证？

更新：这是我的完整代码

@model EmployeesTest.Models.EmployeeVM

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<input type="submit" name="name" value="New Entry" id="new"/>

@using (Ajax.BeginForm(new AjaxOptions { }))
{
    <div id="frm" style="visibility:hidden">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control"})</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control", id="firstName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control", id="lastName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="button" value="Save" class="btn btn-success" id="save"/>
                <input type="button" value="close" class="btn btn-success" id="close"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>
}


@section Scripts {
    <script>
        $(document).ready(function () {

            $('#new').load(x, function (y) {
                var form = $('#frm');
                form.data('validator', null);
                $.validator.unobtrusive.parse(form);
            });

            $('#new').click(function (evt) {
                //evt.preventDefault();
                $('#frm').css('visibility', 'visible');

            });

            $('#save').click(function (evt) {
                //evt.preventDefault();

                //$('#frm').css('visibility', 'visible');

            });

            $('#close').click(function (evt) {
                //evt.preventDefault();
                resetValidations();

                $('#frm').css('visibility', 'hidden');

            });

            function resetValidations() {
                //var validator = $('#frm').validate();
                //$('#frm').find('.field-validation-error span').each(function () {
                //    validator.settings.success($(this));
                //});
                //validator.resetForm();

                $('#firstName').addClass('input-validation-valid');
                $('#firstName').removeClass('input-validation-error');

                $('#lastName').addClass('input-validation-valid');
                $('#lastName').removeClass('input-validation-error');
            }

        });



    </script>
}

这是Model类EmployeeModel

public class EmployeeModel
{
    public int EmpID { get; set; }

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

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

VM

public class EmployeeVM
{
    public string DepartmentID { get; set; }
    public List<SelectListItem> DepartmentColl { get; set; }

    public EmployeeModel emp { get; set; }

    public EmployeeVM()
    {
        emp = new EmployeeModel();
    }
}

Answer 1

首先，我建议您的表单中的封闭div使用display:none而非visibility: hidden设置样式（请参阅this answer了解差异）

<div id="frm" style="display:none">

您的“新条目”按钮应该是普通按钮，而不是提交按钮（其目的是显示表单，而不是提交表单）

<button type="button" id="new">New Entry</button>

然后它的相关脚本将是

$('#new').click(function () {
  $('#frm').show();
});

请注意，您的$('#new').load()脚本也应该删除（不清楚您认为这是在做什么）

接下来，“关闭”按钮也应该是正常按钮，原因与上面相同

<button type="button" class="btn btn-success" id="close">Close</button>

及其重置表单和验证的相关脚本将是

$('#close').click(function () {
  //Reset error messages
  $('.field-validation-error').empty().removeClass('field-validation-error').addClass('field-validation-valid');
  //Reset form controls
  $('#frm').get(0).reset();
  $('.input-validation-error').removeClass('input-validation-error').addClass('valid');
  // Reset lazy validation
  $('#frm').data('validator', null);
  $.validator.unobtrusive.parse($('#frm'))
  // Hide the form
  $('#frm').hide();
});

附注：建议<script>代码中的第一行为var form = $('#frm');，然后您可以将$('#frm')的所有实例替换为form（它会缓存元素，因此更高效）。实际上你真的不需要<div id="frm" style="display:none">元素，因为你可以只显示/隐藏<form>元素本身

另请注意，您可以使用“关闭”按钮的重置按钮 - <button type="reset" class="btn btn-success" id="close">Close</button>并删除$('#frm').get(0).reset();代码行。

如何删除剃刀页面中的验证？

1 个答案: