web-dev-qa-db-ja.com

ajax投稿のためにMVC 3クライアント側検証を手動で呼び出す

MVC 3 Webアプリケーションを作成しています。エンティティクラスでデータ注釈を使用し、サーバーへのポストバックを行う前に控えめなクライアント側検証を使用したい。これは、通常の投稿を行うときにうまく機能します。いずれかのフィールドが無効な場合、検証と検証の概要が表示されます。しかし、私はajaxとjsonを介して情報をポストバックしたいと思います。最初にクライアント側でフォームを「手動で」検証してから、ajaxをサーバーにポストバックする方法はありますか。以下は私のコードの要約版です。

  public class Customer
    {
        [Required(ErrorMessage = "The customer's first name is required.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "The customer's last name is required.")]
        public string LastName { get; set; }
    }



    <% using (Html.BeginForm()) { %>

    <%: Html.LabelFor(model => model.FirstName, "First Name")%>
    <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
    <%: Html.ValidationMessageFor(model => model.FirstName, "*")%>

    <%: Html.LabelFor(model => model.LastName, "Last Name")%>
    <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
    <%: Html.ValidationMessageFor(model => model.LastName, "*")%>

    <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
       <a href="#">Save</a>
    </div>

    <%: Html.ValidationSummary(true) %>

    <% } %>

このコードを試してみましたが、名前のみを検証し、検証の概要は表示しません。

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });
javascriptjqueryasp.net-mvcvalidationasp.net-mvc-3
58
Thomas

試してください：

//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
    evt.preventDefault();
    var $form = $(this);
    if($form.valid()) {
        //Ajax call here
    }
});

//using the click event on the submit button
$('#buttonId').click(function(evt) {
    evt.preventDefault();
    var $form = $('form');
    if($form.valid()) {
        //Ajax call here
    }
});

これは、jQuery ajaxおよびMSAjax呼び出しで機能するはずです。 http://nuget.org/packages/TakeCommand.js または https://github.com/webadvanced/takeCommand を使用して試すこともできます。 。

94
Paul

私は何日もMVCクライアント側の検証に苦労しています：

.click use .submitを使用しないでください：

$("#MyForm").on('submit',function () {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

これに更新を追加します。falseを返すのではなく、イベントをキャンセルすることを検討します（または両方を実行します）。

$("#MyForm").on('submit',function (e) {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    e.preventDefault();

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});
24
Rob

少なくとも私の場合（MVC 5）では、次のコードを追加する必要もありました。そうしないと、.valid()は常にtrueを返します。

$(function () {
$(document).ajaxComplete(function(event, request, settings){
    //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
    $.validator.unobtrusive.parse(document);
});

}）;

http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/ を参照してください

8
Chris Goodman

重要！！：

ポールの解決策は、ロブ博士ではなく、質問に対する正しい答えです。

ただし、validate（）。form（）の代わりにvalid（）を使用できます。

しかし、もっと重要なことは、Dr Robが示唆するようにコードを制限する理由がまったくないことです。つまり、.clickではなく.submitのみを使用します。それが問題を解決したわけではありません！問題を解決したのは、ifステートメントで$ .ajax（...）呼び出しをラップすることでした。すなわち：

if($("#MyForm").valid())
{
    //call to $.ajax or equivalent goes in here.
}

そうしないと問題に対する本当の答えがわかりにくくなるので、明確にする必要があると思います。

3
awrigley
        if(!$('#myform').data('unobtrusiveValidation').validate())
        {
           // add your extra custom logic
        } 
        else
        { 
             $('#myform').submit(); 
        }

検証をトリガーしてブール値を返すため、送信前に確認できます。

0
mrelva

$（YourForm）.data（ 'unobtrusiveValidation'）。validate（）

0
Dipak Pandey

.Valid（）は機能します。つまり、フォームが有効かどうかを示します。ただし、それだけでは、メッセージを正しく表示および非表示にすることはできません。ここに私の手動検証方法があります

function validate()
        {
            //valid() not only tells us whether the form is valid but 
            //also ensures that errors are shown !!!
            if ($("form").valid())
            {
                //if the form is valid we may need to hide previously displayed messages
                $(".validation-summary-errors").css("display", "none");
                $(".input-validation-error").removeClass("input-validation-error");
                return true;
            }
            else
            {
                //the form is not valide and because we are doing this all manually we also have to
                //show the validation summary manually 
                $(".validation-summary-errors").css("display", "block");
                return false;
            }
        }
0
Squibly
I tried all of the above solutions but none worked on MVC5.

JQuery v2.1.4とjQuery.Validation v1.11.1を使用しています。ページのレンダリング中に検証をトリガーする必要があります。 1つだけが私のために働いた。

$(document).ready(function () {
   ...
   validateForm();
}

function validateForm() {`enter code here`
    var elem = document.getElementById('btnSave');
    elem.click();    
}

$('#btnSave').click(function (evt) {
    //evt.preventDefault();
    var form = $('form');
    if (form.valid()) {
        //Ajax call here
    }
    //$(".validation-summary-errors").css("display", "block");
});

function Validate() {
    // If no group name provided the whole page gets validated
    Page_ClientValidate();
}
0
user1810535