2

mvc フォーム送信クリックで呼び出される .js ファイルがあります。その .js ファイル関数で、コントローラーに ajax ポストを行う前にフォームを検証しようとしています

以下のように、.js ファイルの先頭にある次のスクリプト ファイルも参照しました。

    /// <reference path="~/Scripts/jquery-1.9.1.js" />
    /// <reference path="~/Scripts/jquery-ui-1.10.0.js" />
    /// <reference path="~/Scripts/jquery.unobtrusive-ajax.js" />
    /// <reference path="~/Scripts/jquery.validate.js" />
    /// <reference path="~/Scripts/jquery.validate.unobtrusive.js" />

  save = function() {    
      var form = $("#formID");
      var result1 = $("#formID").validate();
      var result = $("#formID").valid();
      if (result === true) {
     $.ajax({ 
                url: whatever the url,
                data: form.serialize(),
                type: 'POST',
                ...............
                ..........
           });
    }
  }

私のビューは厳密に型指定されており、モデル クラスにはすべての DataAnnotations があります。

私のシナリオでは、最初にすべてのデータをロードするフォームがあり、必要なフィールド データをすべてクリアして、検証を確認できるように送信しようとしています。フォームが読み込まれると、以下のようなすべてのデータ属性を含む html が表示されます。

<input class="custom" data-val="true" data-val-required="First Name is required." id="txtFirstName" name="Form1[0].FirstName" placeholder="First Name" title="First Name" type="text" value="robert">

私は常に「result === true」を取得し、それがコントローラーへのajaxポストに行き、それが壊れる理由です.(これを回避するために、将来的にサーバー側の検証を行う予定です)

驚いたことに、「First Name」フィールドからデータを消去した後でも、そこに value="robert" が表示されます....それは問題ですか?

なぜこれが機能しないのかわかりません。

4

2 に答える 2

1

1 まずはクライアント側のデバッグに「Chrome Developer Tool(CDT)」を使う

2 以下の行にブレークポイントを置きます

3 次に CDT に以下のコードを入力すると、フィールドが何であるか、および失敗している検証が表示されます

**$.data($('form')[0], 'validator').errorList**
[
Object
element: input#FirstName.text-box single-line input-validation-error
message: "The FirstName field is required."
__proto__: Object

  1. 以下の作業コード

    $(function () {
    // Handler for .ready() called.
    $('#mycustomsubmitbutton').click(function () {
        var $form = $('form').first();
        var result = $form.valid();
        // Put you break point in the below if condition
        if (result === true) {
            alert("form valid");
        } else {
            alert("invalid form");
        }
    });

});

    @using (Html.BeginForm()) { @Html.ValidationSummary(true) 従業員

        <div class="editor-label">
        @Html.LabelFor(model => model.FirstName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>

    <p>
        <input id="mycustomsubmitbutton" type="button" value="Valid the form and make an Ajax request" />
    </p>
</fieldset>

    }

于 2013-06-14T15:45:24.777 に答える