页面上多个表单的ajax验证，都具有相同的类答案

【问题标题】：ajax validation for multiple forms on page, all have same class页面上多个表单的ajax验证，都具有相同的类
【发布时间】：2013-09-13 11:42:46
【问题描述】：

基本上我正在制作一个 CMS，并希望在后期编辑中拥有。

atm 的工作原理是博客文章被回显（PHP），并且有一个隐藏的 ckeditor，当单击编辑按钮时会显示该 ckeditor。然后编辑按钮被一个保存按钮替换。

这一切都很好，但是保存博客文章时出现了问题。

php 工作正常，ajax 验证也工作正常，但仅当有 1 篇博文时。

当帖子超过 1 条时，就会出现错误。问题在于，保存帖子按钮似乎正在发送每篇博文中的所有数据。我用萤火虫网查了一下，发现所有数据都在发送。

我只需要一种方法，以便表单中的保存按钮只影响该表单内的数据。目前，所有这些都显示错误/成功消息。

这是回响的帖子：

<div class="blogtest">

    <form action="process/updatepost.php" class="updatepost" method="post">
        <input type="button" class='.$editenabled.' value="Edit">
        <input type="submit" class="saveupdatebutton" value="Save">
        <input type="hidden" class="postid" name="postid" value="'.$postID.'">

        <div class="text">

            <div class="buildtext">'.$text.'</div>

            <div class="editor"><textarea name="ckeditor" class="ckeditor">'.$text.'</textarea></div>

        </div>

    </form>

    </div>

这是javascript：

$(document).ready(function(){ $(".updatepost").submit(function(){

    $(".error").remove();
    $(".success").remove();

    // If there is anything wrong with 
    // validation we set the check to false
    var check = true;

    // Get the value of the blog update post
    var blogpost = $('.ckeditor').val();

    // Validation
    if (blogpost == '') {
        check = false;
       $('.ckeditor').after('<div class="error">Text Is Required</div>');
    }

  // ... goes after Validation
    if (check == true) {
$.ajax({
type: "POST",
url: "process/updatepost.php",
data: $(".updatepost").serialize(),
dataType: "json",
success: function(response){

    if (response.databaseSuccess)
       $('.ckeditor').after('<div class="success">Post Updated</div>');
    else
       $('.ckeditor').after('<div class="error">Something went wrong!</div>');

}
        });
    }
    return false;
});

});

感谢阅读。希望你能帮忙。

【问题讨论】：

标签： php javascript jquery ajax validation

【解决方案1】：

您只需要将验证逻辑限制为实际提交的表单。现在$('.ckeditor').after('<div class="error">Text Is Required</div>'); 正在修改与 ckeditor 类名匹配的所有项目。见下文——我添加了一个名为 $targetForm 的变量，它抓取正在提交的表单并适当地修改代码以仅引用该表单的子级。

$(document).ready( function() { 
    $(".updatepost").submit(function() {
        var $targetForm = $(this);

        $targetForm.find(".error").remove();
        $targetForm.find(".success").remove();

        // If there is anything wrong with 
        // validation we set the check to false
        var check = true;

        // Get the value of the blog update post
        var $ckEditor = $targetForm.find('.ckeditor'),
            blogpost = $ckeditor.val();

        // Validation
        if (blogpost == '') {
            check = false;
            $ckeditor.after('<div class="error">Text Is Required</div>');
        }

        // ... goes after Validation
        if (check == true) {
            $.ajax({
                type: "POST",
                url: "process/updatepost.php",
                data: $targetForm.serialize(),
                dataType: "json",
                success: function(response){

                    if (response.databaseSuccess)
                        $ckeditor.after('<div class="success">Post Updated</div>');
                    else
                        $ckeditor.after('<div class="error">Something went wrong!</div>');

                }
            });
        }

        return false;
    });
});

【讨论】：