jQuery 提交事件阻止表单在 IE9 中提交

Question

我试图在提交表单之前添加一些验证。这是我正在使用的：

$('#add_upload').submit(function(e){

    var file = $('#realupload_1').val();
    var p_name = $('#p_name').val();
    var p_price = $('#p_price').val();
    var thumb = $('#realupload_2').val();
    var p_desc = $('#p_desc').val();

    if(file == ''){
        e.preventDefault();
        alert('Please select a valid product file');
    }else if(p_name == '' || p_name == 'ebook name'){
        e.preventDefault();
        alert('Please set a valid product name');
    }else if(p_price == '0.00' || Math.ceil(p_price) == 0){
        e.preventDefault();
        alert('Please set a valid price for your product');
    }else if(thumb == ''){
        alert('Please select a valid product image for your product');
        e.preventDefault();
    }else if(p_desc == '' || p_desc == 'Description...'){
        e.preventDefault();
        alert('Please add a description for your product');
    }else{
        //$('#submita').attr("disabled","disabled").val("Please wait....");
    }

});

以上在 Firefox 和 Chrome 上完美运行。但是，我在使用 IE9 时遇到了问题 - 它到达了 else 语句，但没有提交表单！当我再次按下提交按钮时，它会要求我确保我的上传文件字段不为空！我不知道它是如何清除该值的。

当我删除上述验证时，表单提交正常。不过，我需要先验证一下。

我尝试过的：

1. 我已确保表单 ID 都是唯一的
2. 我已确保将我的提交按钮 ID 命名为其他“提交”
3. 我添加了 $('#add_upload').submit();在 else 字段中。

以上没有任何区别。

我的问题与这个问题类似，但还没有明确的答案。

这是 HTML 。

更新

好吧，我已经将问题缩小到这个问题的 JS 代码：

$('#file_upload_1').click(function(){

    $('#realupload_1').trigger('click');

});

如您所见，我正在触发单击以打开文件对话框。 IE9好像不喜欢这个，肯定是安全问题，如果自动触发文件输入，表单不会提交。

Answer 1

IE9 中的安全性不允许您手动触发该输入字段的点击。

您可以尝试将输入包装在标签中，然后触发标签上的单击，这可能会起作用:)

<label id="labelID" for="inputID">
     <input id="inputID" type="file" />
</label>


$('#labelID').trigger('click');

虽然我确实同意其他答案，但还有更好的方法可以实现您想要实现的目标。

Answer 2

我本来打算赞成 Bhuvan Rikka 的评论，但在查看了 Wirey 对你的代码的修改后，我认为这类似于同意兴登堡需要一层油漆。

标记、脚本和可用性方面存在一些需要注意的问题。

• 修复 ID 并“返回 false”以阻止表单提交。 请参阅 Bhuvan Rikka 的评论

  e.returnValue = false

• 关于ID：让它们有意义。 输入字段名称现在重命名为 eBookFile、eBookName、eBookPrice、Thumbnail、Description，而不是 realupload_1、p_name、p_price、realupload_2、p_desc。
• 在表单标记中：不需要提交的字段不应该有ID。 同样，文本标签永远不应该是输入文本字段。
• 在这一系列 elseif 中链接验证是一个巨大的可用性问题，而使用警报来显示验证错误则使问题变得更加复杂。 立即显示所有错误，并且出于对所有神圣事物的热爱，不要使用警报。
• 定制验证很棒，我为你鼓掌。 如果您使用 jQuery 并且不想花两个小时费力地重新发明轮子，请使用 Validate 插件。

我通过以下更改扩展了wirey's fiddle。

• 清理了 HTML。 很多！
• 链接了 ASPNETCDN 上的 Validate 插件。
• 使用“defaultInvalid”方法扩展了验证插件来处理默认值。
• 表单现在使用 jQuery 验证插件。 向各种表单元素添加了“required”和“defaultInvalid”CSS 类。
• 添加了验证错误的样式。

尝试一下。 请注意，您如何看到所有无效字段，而不是显示第一个无效字段消息的弹出窗口？

这是清理后的 HTML。

<form id="add_upload" action="/echo/json/" method="post" enctype="multipart/form-data">
    <div class="standard-white-row upload-ebook-row">
        <!-- The label is no longer an input.  Removed ID from label -->
        <div class="fakeupload">Select your ebook file&#8230;</div>
        <input id="eBookFile" type="file" class="realupload required defaultInvalid" />
    </div>
    <div class="standard-white-row">
        <div class="field-ebook-name">
            <input id="eBookName" name="eBookName" type="text" value="eBook Name" class="required defaultInvalid" />
        </div>
        <div class="field-ebook-price">
            <input id="eBookPrice" name="eBookPrice" type="text" value="0.00" class="required defaultInvalid" />
        </div>
    </div>
    <div class="standard-white-row upload-preview-img-row">
        <!-- The label is no longer an input.  Removed ID from label -->
        <div class="fakeupload">Select your thumbnail image&#8230;</div>
        <input id="thumbNail" name="thumbNail" type="file" class="realupload required defaultInvalid" />
    </div>
    <div class="standard-white-row">
        <textarea id="Description" name="Description" cols="" rows="" class="required defaultInvalid">Description&#8230;</textarea>
    </div>
    <div class="standard-white-row standard-white-submit">
        <input id="submitButton" type="submit" value="Add ebook" />
    </div>
    <div class="errorSummary incomplete"></div>
</form>

对于表单验证功能，我们首先链接到 Validate 插件http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js，然后使用 defaultInvalid 方法扩展 validate .

// Validation extension to invalidate a field if the value is the default.
// Add the 'defaultInvalid' css class to inputs with a default value.
jQuery.validator.addMethod("defaultInvalid", function (value, element) {
    return !(element.value == element.defaultValue);
});

第一种验证方法将在无效字段旁边显示验证错误。

第二种（已注释掉）验证方法将验证错误放在表单下方的摘要中。

$(document).ready(function () {
    // Invalid fields will receive the 'errorHilite' css class
    // error message will be inline adjacent to the invalid field
    $('#add_upload').validate({
        keyup: false,
        onfocusout: false,
        onclick: false,
        errorElement: "span",
        errorClass: "errorHilite"
    });

    // Invalid fields will receive the 'errorHilite' css class.
    // Error messages are summarized in the element specified by errorLabelContainer.
    /*
    $('#add_upload').validate({
        errorLabelContainer: $(".errorSummary"), 
        keyup: false,
        onfocusout: false,
        onclick: false,
        errorElement: "div",
        errorClass: "errorHilite"
    });
    */

});

查看验证 API 参考以获取更多选项。