Question

对于自定义图像选择工具，我想基于html 5表单验证创建表单验证。

例如，我的表单由以下元素组成：

<form class="cms-form" action="">
    <table width="800">
        <tr>
            <td width="30%">Name:</td>
            <td><input type="text" name="name" class="cms-input-text" maxlength="127" /></td>
        </tr>
        <tr>
            <td>Image:</td>
            <td><textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}">/location-to-image.png</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Next"/></td>
        </tr>
    </table>
</form>

我有一个javascript，它将textarea（.cms-input-file）更改为一些html来添加图像并隐藏原始文本区域。它看起来像这样：

<textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}" style="display: none;">/location-to-image.png</textarea>
<ul class="cms-input-file-list">
    <li class="cms-input-file-item" data-image="/location-to-image.png">
        <img src="/location-to-thumb.png" alt="" class="cms-input-file-item-thumbnail"/>
        <span class="cms-input-file-item-title">location to image</span>
    </li>
    <li class="cms-input-file-add">Add</li>
</ul>

由于我使用html5表单验证分配现有表单，我想在html5支持的浏览器中使用默认表单验证来验证此元素，但使用希望存在的事件。

我正在寻找类似的东西：

$('.cms-input-file').on('customValidateFunction', function () {
    var options = $(this).data('options');

    if($(this).find('> li.cms-input-file-item').length < options.min)
    {
        return [false, 'Add more images.'];
    }

    if($(this).find('> li.cms-input-file-item').length > options.max)
    {
        return [false, 'Remove some images.'];
    }

    return true;
});

有没有人知道使用默认的html 5事件是否可以这样做，或者我如何将这个事件添加到提交事件？要实际触发默认的浏览器验证外观。

- 编辑 -

到目前为止，我尝试使用隐藏原始元素的div元素来获取此结果。但是现在我需要根据我的选项为元素添加一个模式。这可能吗？

当前进度：http://jsfiddle.net/jeffreydev/YyEVu/

Answer 1

如果我理解你需要什么，我认为你可以使用任何输入元素的pattern attribute来实现你想要做的事情。

我创建了一个非常简单的form in jsfiddle来说明这一点。

我们的想法是，在添加或删除图像时，使用模型中的任何数据更新输入值。例如，每个图标只添加一个字母 f 。然后，您可以创建一个正则表达式以匹配预期的有效结果。在示例中， pattern =“f {1,3}”表示有效，内容可以是“f”，“ff”或“fff”，但没有别的，这意味着它只接受一到三个文件发送。

您将使用默认的html5表单验证，但您可能需要进行一些调整才能使其正常工作。

但是，如果你这样做，你应该记住几件事：

如specs中所述，patttern 编译为JavaScript正则表达式，禁用全局，ignoreCase和多行标记
设置输入的禁用属性以便用户无法更改它会将其从表单中删除，因此无法验证
将某些样式作为* display：none“应用于输入元素可能会在验证失败并且浏览器试图关注元素时导致错误。

我希望你这有帮助

Answer 2

您可以在submit上安装<form>处理程序，然后从那里发送自定义事件。

看起来像这样：

$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   

    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);

    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});

然后，您可以“挂钩”customValidate事件，并安装自己的逻辑......

$('textarea[name=icon]').on('customValidate', function(evt, reporter) {
    var options = $(this).data('options');

    // ... your validation here ...

    // for example:
    var txt = $(this).val();
    if( txt.length < options.min || txt.length > options.max ) {
        reporter.reportValidationError('error: "icon" min/max exceeded!');
    }
})

Here's an example at jsFiddle

修改

您可以设置错误报告的样式，并调整代码，以便按照您的需要进行查看和操作。 Here's an example

Answer 3

一个非常好的jquery插件来验证你的表单是Mike Alsup的一个。你会在这里找到它：http://jquery.malsup.com/form/

记录在案，ajax兼容。

它可以对一个字段或表单内的所有字段进行序列化，因此对于您可能需要使用表单处理字段验证和错误逻辑的问题，这是一个很大的优势。

您可以添加同一作者的blockUI插件以增强用户体验，并且在启用javascript时不必管理表单的双重提交。 http://jquery.malsup.com/block/

使用html 5对元素进行自定义表单验证功能

3 个答案: