html 5元素上的自定义表单验证功能答案

【问题标题】：Custom form validation function on element with html 5html 5元素上的自定义表单验证功能
【发布时间】：2012-08-20 09:41:53
【问题描述】：

对于自定义图像选择工具，我想创建基于 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。它看起来像这样：

<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/

【问题讨论】：

你在使用 jquery 表单验证插件吗？
不，我只使用默认的 html5 浏览器验证，但我想知道是否可以使用 javascript 来解决这个问题。
添加了 1 到 3 张图片后，您还希望提交该表单吗？我仍然认为您可以使用下面发布的pattern example 或customValidation example 中显示的任何方法来做到这一点。两者都这样做。
还没有想到，我可能最终会使用高度和宽度为 0 的父元素隐藏原始元素并将溢出设置为无（这样浏览器的弹出窗口仍然显示)，然后在更改而不是在表单提交时使用 setCustomValidity 函数来显示正确的消息。谢谢！

标签： javascript html jquery validation jquery-events

【解决方案1】：

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

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

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

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

但是，如果您尝试这种方式，您应该记住以下几点：

如 specs 中所述，该模式编译为 JavaScript 正则表达式，禁用 global、ignoreCase 和 multiline 标志
设置输入的 disabled 属性以使用户无法更改它会使其脱离表单，因此不会被验证
将某些样式作为 *display:none" 应用于输入元素可能会在验证失败并且浏览器试图获得对元素的关注时导致错误。

希望对你有帮助

【讨论】：

我添加了示例的variation。在这种情况下，它使用setCustomValidity() 对该字段进行自定义验证。它具有更好地控制验证消息的好处。
感谢您的输入，这让我对如何隐藏原始输入元素而不是使用 display:none 有了一些想法。

【解决方案2】：

您可以在<form> 上安装submit 处理程序，并从那里分派自定义事件。

看起来像这样：

$('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.

【讨论】：

是的，但是这不会触发浏览器的默认验证，因为它看起来与默认浏览器验证看起来不同。它还在默认表单验证完成后触发。正如你在这里看到的：jsfiddle.net/jeffreydev/6ZGJu
[1] 您可以将错误报告设置为您希望的样式。 Here's an example。 | [2] 我不确定为什么在 HTML5 验证之后运行自定义验证会出现问题......在提交表单之前，这一切都必须运行（并通过）。你能详细说明一下这个问题吗？
提交表单有多烦人，因为您没有填写所有内容而出现错误。然后填写这些字段，再次提交并收到更多错误。
在我的浏览器 (chrome) 上，这正是内置 HTML5 验证的工作方式：一次一个字段。 [我看到，在 Firefox 上，消息弹出窗口一次只显示一个字段，但是 all 失败的字段有一个红色边框——你在说那个红色边框吗？]让我知道您使用的是什么浏览器，以便我查看您尝试产生的行为。
我的主要浏览器确实是 Firefox，我不知道这些浏览器的错误显示方式不同。也许我只需要创建/找到一个插件，它将根据 html 标准验证表单并添加对自定义验证功能的支持。我希望这可以避免。感谢您的意见。

【解决方案3】：

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

已记录在案，兼容 ajax。

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

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

【讨论】：