jquery - 验证来自 ajax 注入(inject)元素的数据。需要将新数据绑定(bind)到文档以便验证能够看到它。多维 Controller

Question

我需要验证 ajax get 注入(inject)的表单数据。就验证而言，直到添加新的表单元素为止，以下表单工作得很好。我正在使用 MVC 5，但相信这更多地扩展到了 jQuery 的范围。

元数据验证类:

这在形式上效果很好

public class Exer_WorkoutMetaData
{
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Description is optional but testing now")]
    public string Description { get; set; }
}

这不起作用，因为我相信我没有将 ajax get 正确绑定(bind)到 View

public partial class Exer_RoutineMetaData
{
    [Required(ErrorMessage="Routing Name is Required.")]
    public string Name { get; set; }
}

就验证而言，直到添加新的表单元素为止，以下表单都可以正常工作。下面是我使用的主要表格。底部是我调用来获取页面的脚本，然后调用函数来验证提交时的表单。

<div id="AjaxUpdate"></div>
<div id="showFaliure"></div>
@using (Html.BeginForm())
{ 

    @Html.ValidationSummary(false)

    <fieldset>
        <legend>Workout</legend>
        <div>
            <table>
                <tr style="justify-content:center">
                    <td>
                        Workout Name:
                    </td>
                    <td>
                       @Html.TextBoxFor(model => model.Name, new { style = "width:100%" })@*<input type="text" name="Workout.Name" style="width:100%" />*@
                       @Html.ValidationMessageFor(model => model.Name, "*")
                    </td>
                </tr>
                <tr>
                    <td>
                      Description:
                    </td>
                    <td>
                       @Html.TextBoxFor(model => model.Description)  @*<input type="text" name="Workout.Description" /> *Html.TextBoxFor(x=>x.Exer_Routine[0].Name)*@
                    </td>
                </tr>
                <tr>
                    <td>
                        Wrokout Notes:
                    </td>
                    <td>
                        @Html.TextAreaFor(x => x.Notes)
                    </td>

                </tr>
                   </table>
             <br />
            <div id="RoutineAndSetCounts">
                <input type="hidden" name="RoutineCount" value="0" />
                <input type="hidden" name="TotalSetCount" value="0" />
            </div>
            <div id="AddRoutine">Add Routine</div>
            <div id="RoutineRows">

              </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </div>
    </fieldset>
}
<script>
    $(document).ready(function ()
    {


        $("#AddRoutine").click(function () {
            var routineCount = routineCount = $('input[name=RoutineCount]').val();
            **////////////////////////////////////////////////////////
            //Get Data Here - How do I bind this data so that when the form is submitted 
            //it validates the data that was injected below??
            ////////////////////////////////////////////////////////**
            $.get( '/Default/AddRoutineHTML?RoutineCount=' + routineCount, function(data) {
                $('#RoutineRows').append(data);
            });
            routineCount++;
            routineCount = $('input[name=RoutineCount]').val(routineCount);

        });
        //////////////////////////////////////////////////
        // This Function works well on the original data, 
        //just can't get it to work on the injected data
        //////////////////////////////////////////////////
        $('form').submit(function (evt) {
            evt.preventDefault();
            var $form = $(this);
            $form.validate();
            if ($form.valid()) {
                $.ajax({
                    type: 'post',
                    url: '/Default/NewWorkout',
                    data: $('form').serialize(),
                    success: function () {
                        alert('form was submitted');
                    }
                });
                evt.preventDefault();
            }
        });

    });

</script>

这是加载到主锻炼页面的/Default/NewWorkout 数据。我无法将此新添加的数据正确绑定(bind)到文档，因此文档验证脚本无法看到它:

<table>
        <tr style=" justify-content:center">
        <td>
            Routine Name:
        </td>
        <td>
            @*Html.TextBoxFor(x => x.Exer_Routine.)<input type="text" id="Workout.Exer_Routine[@ViewBag.RC].Name" name="Workout.Exer_Routine[@ViewBag.RC].Name" /> *@
            @Html.TextBoxFor(x => x.Exer_RoutineList[Model.RoutineCount].Name)

        </td>
        </tr>
        <tr>
            <td>
                Description:
            </td>
            <td>
                @Html.TextBoxFor(x => x.Exer_RoutineList[Model.RoutineCount].Description)
            </td>
        </tr>
        <tr>
            <td>
                Notes:
            </td>
            <td>
                @Html.TextBoxFor(x => x.Exer_RoutineList[Model.RoutineCount].Notes)
            </td>

        </tr>
    </table>

Answer 1

您可以使用以下方法重新验证所有元素(包括新元素):

var $form = $("form")
$form.removeData('validator')
     .removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);

另请参阅http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/