javascript - 阻止人们通过导航到其他地方来绕过我的表单验证

Question

我有一个表单，可以让用户在我的数据库中编辑项目数据。我要求每个项目都有随附的图片，因此我使用 jQUery 验证所需的规则来验证项目图片。

目前，用户将选择一个项目并按照“类别”>“子类别”>“项目”>生成表单的顺序生成包含项目详细信息的表单。然后，用户可以删除现有的项目图片并将其替换为新的图片。但是，因为我正在将项目图片设为必填项目，所以如果不将他删除的项目图片替换为新的项目图片，他将无法提交表单。

此验证工作完美，但有一个异常(exception)。删除项目图片后，如果用户单击我的导航栏并转到其他地方，他可以完全跳过验证。这给我留下了一个没有显示图片的项目，并且当他加载相同的表单时会导致错误，因为该项目没有显示图片。

有什么办法可以防止这种情况发生吗？

PHP表单生成代码(摘录):

//Input and preview for Display Pic
echo"<div class='BizEditItemDetails' >";
    echo"<label for='BizEditItemFileDP'>Upload Image[DP] &nbsp &nbsp&nbsp&nbsp(Max Size:2MB)</label>";
    echo"<input type='file' class='BizEditItemInput' id='BizEditItemFileDP' name='BizEditItemFileDP' />";
    echo"<input type='button' id=ImageCancelDP name=ImageCancelDP class='ImageCancelButton' value='Cancel'>";
    echo"<span></span>";
    echo"<br>";
    echo"<img id='ImagePreviewDP' name='ImagePreviewDP' class='ImagePreview' src=\"$dp\" > ";
    echo"<input type='hidden' id='ImagePreviewDPValidate' name='ImagePreviewDPValidate' value=\"$dp\" >";
    echo"<input type='hidden' id='DisplayDeleteItemID' name='DisplayDeleteItemID' value=$itemid>";
    echo"<input type='hidden' id='DisplayDeleteItemPicID' name='DisplayDeleteItemPicID' value=$dpid>";
    echo"<input type='hidden' id='DisplayDeleteFilePath' name='DisplayDeleteFilePath' value=$dpfilepath >";
    echo"<input type='button' id='DisplayDelete' name='DisplayDelete' class='ImageDeleteButton' value='Delete Picture'>";
    echo"<br>";
echo"</div>";

jQuery 验证(摘录):

ImagePreviewDPValidate:{
            required:true
        },

Answer 1

您需要重新考虑您的流程，您当前的流程无法修复。

问题在于您允许第一个请求将服务器端记录置于无效状态。你不能那样做。无法保证用户会发出第二次请求，并且您无法使用 JavaScript 强制解决该问题。如果他们只是关闭浏览器窗口，或者离开计算机，或者他们的互联网连接中断怎么办？

我建议更改流程，以便用户可以替换图像(这将在对服务器的单个请求中发生)，而不是允许他们删除图像并添加新图像.