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语句，但它没有提交表单！一旦我再次按下提交按钮，它会要求我确保我的上传文件字段不为空！我不确定它是如何清除价值的。

当我删除上述验证时，表单提交正常。但是，我需要先验证。

我尝试过：

我确保表单ID都是唯一的
我确保将我的提交按钮ID命名为其他“提交”
我添加了$（'＃add_upload'）。submit（）;在其他领域。

以上没有任何区别。

我非常感谢这里的帮助，因为我浪费了2个小时！

我的问题与this question类似，但尚未确定答案。

Here is the HTML如果有帮助的话。

更新

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

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

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

});

如您所见，我正在触发单击以打开文件对话框。 IE9似乎不喜欢这样，它必须是一个安全问题，如果文件输入被自动触发，表单将不会提交。

有人可以证实吗？

Answer 1

我要赞成Bhuvan Rikka的评论，但在看过Wirey的代码之后，我认为这可能类似于同意Hindenberg需要一层油漆。

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

修复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 plugin。

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

清理HTML。很多！
关联Validate plugin on ASPNETCDN。
使用'defaultInvalid'方法扩展验证插件以处理默认值。
表单现在使用jQuery validate插件。为各种表单元素添加了'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>

对于表单验证功能，我们首先链接到http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js处的Validate插件，然后使用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"
    });
    */

});

查看Validate API Reference了解更多选项。

Answer 2

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

您可以尝试将输入包装在Label中，然后触发标签上的单击，这可能有效：）

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


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

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

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

更新

2 个答案: