1

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

$('#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(); 在其他领域。

以上没有任何区别。

我真的很感谢这里的帮助,因为我在这上面浪费了 2 个小时!

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

如果有帮助,这里是 HTML 。

更新

好吧,我已经将问题缩小到这个问题 JS 代码:

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

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

});

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

谁能证实这一点?

4

2 回答 2

3

我本来打算赞成 Bhuvan Rikka 的评论,但在查看了 Wiley 对您的代码的摆弄之后,我认为这类似于同意兴登堡需要一层油漆。

标记、脚本和可用性有几个问题需要引起注意。

  • 修复 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 的小提琴。

  • 清理了 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>

对于表单验证功能,我们首先在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"
    });
    */

});

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

于 2012-09-22T01:08:54.877 回答
3

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

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

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


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

尽管我确实同意其他答案,但有更好的方法来做你想要实现的目标。

于 2012-09-26T11:26:04.750 回答