10

私は MVC4 w/JQuery を使用しており、@Ajax.BeginForm を使用して作成したフォームがあります。必須フィールドがあります (ビューモデルで設定)。フォームを送信する前にフォームを検証しようとしています。ただし、検証されていないようです。

もともと送信ボタンがあり、フォームを送信するだけでした。送信ボタンを通常のボタンに変更し、 $('#formname').validate() を呼び出してみましたが、常に true を返します (必須フィールドが入力されていない場合でも)。他のビューは正常に動作しているようです (Ajax.BeginForm を使用していないビュー)。

jquery、jquery-ui、jquery.validate、jquery.validate.unobtrusive、および jquery.unobtrusive-ajax を参照しています。

私が見逃しているアイデア/提案はありますか?

編集 - - - - - - - - - - - - - - - - - - - - - - - - - --------------------------

以下は私のコードです (これは、jquery スクリプトを参照するマスター ページ内にあります)。

@model AimOnlineMRA.Models.Reports.DateRangeViewModel 

@using (Ajax.BeginForm("GetReport", "Reports", new AjaxOptions
{
    UpdateTargetId = "report_pane", HttpMethod = "Post"}, new {@id="parameterForm"}))
{
    @Html.AntiForgeryToken()

<script type="text/javascript">
    $(document).ready(function () {
        ApplyTheme();

        $('#btnYes').click(function() {
            $('#RunSpecificDateRange').val('true');

            $('#yesNo').hide();
            $('#dateRangeForm').show();
        });

        $('#btnCancel').click(function () {
            $('#report_pane').html('').hide();
        });

        $('#btnOk').click(function () {
            //if ($('#parameterForm').valid()) {
            //    alert('valid');
            //} else {
            //    alert('invalid');
            //}
        });

        $('#dateRangeForm').hide();

        $('#BeginDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });

        $('#EndDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });
    });
</script>

<div class="margin-auto" style="width: 400px">

    <div id="yesNo">
        <span class="bold">Do you want to run this report for a specific date range?</span> 
        <br /><br />
        @Html.Button("Yes", "btnYes")
        @Html.Button("No", "btnNo")
    </div>
    <div id="dateRangeForm">
        <span class="bold">Date Range</span> 
        <br /><br />
        <div class="left">
            <div class="left clear-both">
                @Html.LabelFor(x => x.BeginDate) <br />
                @Html.TextBoxFor(x => x.BeginDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.BeginDate)
            </div>
            <div class="left clear-both m-top-5">
                @Html.LabelFor(x => x.EndDate) <br />
                @Html.TextBoxFor(x => x.EndDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.EndDate)
            </div>
        </div>
        <div class="left m-left-10">

        </div>
        <div class="left clear-both m-top-10">
            @Html.Button("Ok", "btnOk")
            @Html.Button("Cancel", "btnCancel")
        </div>
    </div>
</div>
}

- - - - - - - - -解像度 - - - - - - - - - - - - - - -

問題を修正する$.validator.unobtrusive.parse($('#parameterForm'));前に電話する$('#parameterForm').valid();

4

5 に答える 5

29

試す

$.validator.unobtrusive.parse($('#parameterForm'))

電話する前に

$('#parameterForm').valid()

于 2013-07-26T13:18:54.830 に答える
10

質問にはすでに受け入れられた回答がありますが、将来これを見つけた人にとって別の理由が考えられます...

nameフォーム内の最初の検証済み要素に、次のような属性があることを確認してください。

<input type=text required name='blah' />

この同じ問題を 2 時間かけて追跡したところ、フォーム内の最初に検証された要素にname属性がある場合、すべてが期待どおりに機能することがわかりました (つまり.valid()、フォームが無効な場合は false を返します)。他の検証された要素に name 属性があるかどうかに違いはないようです。

通常の形式では、データがサーバーに送信されるときに使用されるものであるため、name 属性は間違いなく必要です。しかし、Knockout を使用する環境など、より最新の環境ではname、データ バインディングがデータ モデルを最新の状態に保つために機能するため、入力要素に属性を設定する必要はありません。

于 2014-03-14T01:45:15.973 に答える
-3

私は両方のファイルを参照していました:

  • jquery.validate.js
  • jquery.validate.unobstrusive.js <-- この参照を削除してください!

jquery.validate.unobstrusive.jsへの参照を削除し、修正しました

これが誰かに役立つことを願っています

于 2014-05-21T18:15:06.440 に答える