2

これがシナリオです。

ユーザーがフォームに入力します。彼はいくつかの必要な情報を忘れています。私の検証コードは、欠落しているフィールドが必須であることをユーザーに示しています。彼はフォームに完全に記入して送信します。プレストそれは動作します。

ここで、ユーザーは必須フィールドを手動で削除し、もう一度送信します。すぐに機能します（IT SHOUDLNT）。空のフィールドが送信されないように、検証をもう一度機能させるにはどうすればよいですか? これが私のコードです。フォーム送信の1回の繰り返しでのみ機能します。後続のすべての送信は、私の検証を無視します。

ありがとうございました...

//Validation  
$('#CommentsForm').validate({
    rules: {
        Author: "required",
        Message: "required"
    },
    messages: {
        Author: "Author is required.",
        Message: "Comment is required."
    },
    errorContainer: "#CommentsErrorBox",
    errorLabelContainer: "#CommentsErrorBox ul",
    wrapper: "li"
});

//User Clicked Submit Button
$('#CommentsForm').live('submit', function (e) {
    e.preventDefault(); //Prevent Browser from getting new url

    //Create JSON object
    var jsonCommentData = {
        ID: $('#HiddenID').val(),
        Author: $('#Author').val(),
        Message: $('#Message').val()
    }

    //Add the comment.
    $.ajax({
        url: '/Home/_CommentsAdd',
        type: 'POST',
        data: JSON.stringify(jsonCommentData),
        dataType: 'html',
        contentType: 'application/json',

        //The request was a success. Repopulate the div with new result set.
        success: function (data) {
            $('#AjaxComments').html(data);
            $('abbr.timeago').timeago(); //update the timestamp with timeago

            //Change colors of message.                
            if ($('#CommentStatus').html() == "Your Comment Has Been Added!") {
                $('#CommentStatus').css('color', 'GREEN');
            }
        },
        error: function (data) {
            alert('Fail');
        }
    });
});

ここに私の部分的なビューがあります: _Comments

@model DH.ViewModels.CommentsViewModel

<div id="AjaxComments">
@{
    <input type="hidden" id="HiddenPageNumber" value="@Model.PageNumber.ToString()" />
    <input type="hidden" id="HiddenPageCount" value="@Model.PageCount.ToString()" />

    //No Comments Yet
    if (Model.CommentStatus.Length > 0)
    {
            <div id="CommentStatus">@Model.CommentStatus</div>
    }

    foreach (var item in Model.Comment)
    {   
        <div class="CommentContainer">
            <div class="RateComment">
                <img src="/content/images/icons/Thumbs-Up-16x16.png" alt="Thumbs Up" title="Uprate Comment" style="margin-top: 10px;" />
                <div class="CommentRating">8</div>
                <img src="/content/images/icons/Thumbs-Down-16x16.png" alt="Thumbs Down" title="Downrate Comment" style="margin-top: 5px;" />
            </div>
            <div class="CommentHeader">
                <div class="CommentAuthor">@item.Author</div>
                <div class="MessageDate">
                    <img src="/content/images/icons/Clock-16x16.png" width="16" height="16" alt="Comment Time" style="vertical-align: middle; padding-bottom: 2px;" />
                    <abbr class="timeago" title="@item.MessageDate" style="border-bottom-width: 0;">@item.MessageDate</abbr>
                </div>
            </div>
            <div class="CommentMessage">@item.Message</div>
            <div style="clear: both;"></div>
        </div>
    }
}

<div id="Pagination">
@{ 
    //Setting up Increments of 10 Pagination links
    int StartPage;
    int EndPage;
    int PageNumber = Model.PageNumber;
    int PageCount = Model.PageCount;

    if (PageCount < 10) {
        StartPage = 1;
        EndPage = PageCount;
    }
    else {
        if (PageNumber < 10) {
            StartPage = 1;
            EndPage = 10;
        }
        else {
            StartPage = PageNumber - 5;
            EndPage = PageNumber + 4;
            if (EndPage > PageCount) {
                EndPage = PageCount;
                StartPage = EndPage - 9;
            }
        }
    }

    //Display "Page of" if there are comments.
    if (@Model.PageCount > 0)
    {
        <div id="PageOf">Page @Model.PageNumber of @Model.PageCount</div>
    }

    //Set up First and Prev arrow links
    if (Model.PageNumber > 1) {
        <a class="PaginationLink" title="Prev" href="">< Prev</a>
    }

    //Loop through and create the page #'s.
    for (var PageCounter = StartPage; PageCounter <= EndPage; PageCounter++) {
        //Display the Page # in a Black Box
        if (PageCounter == PageNumber) {
            <span class="CurrentPage">@PageNumber</span>
        }
        //Create the Page # Links.
        else {
            <a class="PaginationLink" title="@PageCounter" href="">@PageCounter</a>
        }
    }

    //Set up Next and Last arrow links
    if (Model.PageNumber < Model.PageCount) {
        <a class="PaginationLink" title="Next" href="">Next ></a>
    }
} 
</div>

<div id="CommentsFormContainer">
    <form id="CommentsForm" action="">
    <div id="CommentsErrorBox"><ul></ul></div>
    <fieldset id="CommentsFormFieldset">
        <legend id="CommentsFormLegend" align="center">Add a Comment</legend>
        <label for="Author" class="LabelAuthorMessage">Author:&nbsp;</label><input type="text" id="Author" name="Author" size="30" class="CommentInputs" />
        <label for="Message" class="LabelAuthorMessage">Comment:&nbsp;</label><textarea id="Message" name="Message" cols="35" rows="5" class="CommentInputs"></textarea>
        <input type="text" id="CharCount" value="0" readonly="readonly" />&nbsp;&nbsp;
        <label for="CharCount" id="LabelCharCount">* Max 200 Characters</label>
        <input type="submit" id="SubmitComment" value="Submit" name="SubmitComment" style="float: left; margin-left: 50px;" />
    </fieldset>
    </form>
</div>

4

1 に答える 1

2

あなたの問題は完全にあなたの実装にあります。

次のことがページの読み込み時に発生し、最初の送信でフォームが正常に機能します...

var validator = form.validate({
    rules: {
        Author: "required",

        etc....

次に、送信ハンドラーで再度囲んだため、ここで再初期化されます...

form.live('submit', function (e) {
    e.preventDefault(); //Prevent Browser from getting new url

    $(this).validate();

...次の送信のためにそれを壊します。

あなたがする必要があるのは、送信ハンドラー内ではなく、一度（すべてのオプションを含む）初期化することです...

$('#CommentsForm').validate({
    rules: {
        Author: "required",

        etc....

これらの公式デモのソースコードを参照してください。

編集：

繰り返しになりますが、フォームの送信を妨げるため、送信ハンドラーは必要ありません。

つまり、検証は正常に機能していますが、「送信」を押すと、外部の送信ハンドラー関数が完全に引き継ぐため、検証が失敗し始めるのも不思議ではありません。

元のコメントで述べたように、Validationプラグインには、ajaxを含むすべてを処理するための送信ハンドラーが組み込まれています。

これをすべて完全に削除してください...

form.live('submit', function (e) { ....

次に、関数内に、2番目のオプションとしてリストされているプラ​​グインのドキュメントに従ってvalidate()送信ハンドラーを追加するだけです...

$('#CommentsForm').validate({
    rules: {
        Author: "required",

        /// etc....

    },

    submitHandler: function(form) {

        /// put all your ajax and such in here

    }

 });
于 2012-05-15T22:46:33.997 に答える