1

ajax リクエストを送信する前に、jQuery 検証エンジンを使用してフォームを検証しようとしています。ただし、フォームにエラーが含まれている場合、ajax もリクエストを送信します。

JavaScript:

$('#addphrase').validationEngine('attach', {
    inlineValidation: false,
    promptPosition: "centerRight",
    onSuccess: function () {
        use_ajax = true;
        alert(dcd);
    },
    onFailure: function () {
        use_ajax = false;
        alert(ggg);
    }
});

$('form[name="addphrase"]').submit(function (e) {
    if (use_ajax) {
        $('#loading1').css('visibility', 'visible');
        $.get('addphrase.php', $(this).serialize() + '&ajax=1',

        function (data) {
            if (parseInt(data) == -1) {
                $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
            } else {
                $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
            }
            $('#loading1').css('visibility', 'hidden');
            setTimeout("jQuery('#resp1').hide('slow');", 3000);
            setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
        });
    }
    e.preventDefault();
}
});

HTMLの編集

  <form class="form-horizontal" id="addphrase" name="addphrase" method="GET" action="">
            <div class="control-group"><label class="control-label" for="form-field-1">Phrase</label>
  <div class="controls">
  <input type="text" id="phrase" class="validate[required]" placeholder="Phrase" name="Phrase" value="" /></div></div>
  <div class="control-group"><label class="control-label" for="form-field-11">Content Here</label>
  <div class="controls">
  <textarea name="post_content"  value="" class="validate[required] autosize-transition span12" id="comment" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea></div></div>
  <div class="space-4"></div><div class="control-group" style="float:left; margin-right:25px"><div class="controls">
  <button type="submit" class="btn btn-info">
 <i class="icon-ok bigger-110"></i>
 <input type="submit" value="" id="phsubmit" style="opacity:0">Submit</button>
 <button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button></div></div>
 <div id="resp1" style="float:left; margin-top:5px"><img id="loading1" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" /></div></div>
</form>

上記のコードでは、アラートが表示されず、プロパティが添付されません。どちらの場合も、失敗または成功の場合です。

どんな助けでも大歓迎です。

4

1 に答える 1

1

onValidationCompleteのように使用してみてください。

$('#addphrase').validationEngine('attach', {
    inlineValidation: false,
    promptPosition: "centerRight",
    onValidationComplete: function (form, status) {
        if (status) {
            alert('Form submit');
            $('#loading1').css('visibility', 'visible');
            $.get('addphrase.php', $(this).serialize() + '&ajax=1',

            function (data) {
                if (parseInt(data) == -1) {
                    $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">* Please ensure all fields are filled.","error"</p>');
                } else {
                    $("#resp1").show('slow').after('<p id="resp-mes1" style=" color:#000000; text-decoration: bold;">Added successfully. Thank You...</p>');
                }
                $('#loading1').css('visibility', 'hidden');
                setTimeout("jQuery('#resp1').hide('slow');", 3000);
                setTimeout("jQuery('#resp-mes1').hide('slow');", 5000);
            });
        }
        else
        {
            alert('Error');
        }
    },
});

ドキュメントを読む

デモ

于 2013-10-17T05:58:42.337 に答える