javascript - 为什么ajax请求不触发验证

Question

我有一个动态生成的表单。表单内部是一个执行 AJAX 请求的函数，成功后，修改用于验证的隐藏字段的值(将其设置为空字符串)。(隐藏字段设置为“required:true”)

但是，在成功执行该函数后，隐藏字段不会触发 jQuery 的验证，并且我能够提交表单。只有当我故意触发其他字段的验证时，才会触发隐藏字段的验证，并且隐藏字段的错误消息会与其他错误消息一起出现。

功能:

function DeleteImageDP(){

    var itemid=$('#DisplayDeleteItemID').val();
    var filepath=$('#DisplayDeleteFilePath').val();
    var itempicid=$('#DisplayDeleteItemPicID').val();
    var cfm=confirm("Confirm deletion of picture? ( Note: Picture wil be deleted permanently.");
    if(cfm == true)
    {
        $.ajax({

        url:"delete/deletedp.php",
        type:"POST",
        data:"ItemID="+itemid+"&FilePath="+filepath+"&ItemPicID="+itempicid,
        success:function(){

            alert("Image successfully deleted.");
            $('#ImagePreviewDP').prop('src','').hide();
            $('#ImagePreviewDPValidate').val('');
            $('#DisplayDelete').hide();

        },
        error:function(){

            alert("Image could not be deleted due to an error.");

        }

        });
        return true;
    }
    else
    {
        return false;
    }

};

验证:

$('#ItemDetailsContainer').on('change',function(){
    //Validation code .....
    ImagePreviewDP:{
        required:true
    },
    //More validation code....
});

表格(摘录):

//Input and preview for Display Pic
echo"<div class='BizEditItemDetails' >";
    //More code above
    echo"<img id=ImagePreviewDP name=ImagePreviewDP class='ImagePreview' src=\"$dp\" > ";
    echo"<input type='hidden' id='ImagePreviewDPValidate' name='ImagePreviewDPValidate' value=\"$dp\" >";
    //More code below
echo"</div>";

为什么将 $("#ImagePreviewDP") 的值设置为空字符串会触发 on.change？另外，我如何在成功执行函数时触发验证，而不是仅与其他错误？

Answer 1

使用 JavaScript 以编程方式设置元素值永远不会触发 onchange 事件，您必须自己触发它

$.ajax({

    url:"delete/deletedp.php",
    type:"POST",
    data:"ItemID="+itemid+"&FilePath="+filepath+"&ItemPicID="+itempicid,
    success:function(){

        alert("Image successfully deleted.");
        $('#ImagePreviewDP').prop('src','').hide();
        $('#ImagePreviewDPValidate').val('');
        $('#DisplayDelete').hide();

        $('#ItemDetailsContainer').trigger('change');
    //     ^^ trigger event handler

    },
 ...........