在元素上使用html5的自定义表单验证功能。

Question

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

例如，我的表单由以下元素组成，我有一个Javascript将textarea(.cms-input-file)改成html来添加图片和hides。

<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;
});

有人知道这样的东西是否可以使用默认的html5事件吗？ 或者我应该如何添加这样的东西？事件 到提交事件？要实际触发默认的浏览器验证外观和感觉。

-- 编辑

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

目前的进展。http:/jsfiddle.netjeffreydevYyEVu

Answer 1

如果我没有理解错的话，我想你可以通过使用这个工具来实现你的需求。模式属性 的任何输入元素。

我已经创建了一个非常简单的 在jsfiddle中的形式 说明了这一点。

这个想法是，你在添加或删除图像时，用你模型中的任何数据更新你的输入值。这个例子，只是增加了一个字母 f 每个图标。然后，你可以创建一个regex来匹配预期的有效结果。在这个例子中。模式="f{1,3}" 意思是说，内容可以是 "f"、"ff "或 "ffff"，但不能是其他内容，也就是说，它只能接受一至三个文件的发送。

您将只使用默认的html5表单验证，但您可能需要稍作调整才能使其工作。

然而，如果您尝试这种方式，您应该记住几件事。

1. 正如在 规格，父亲是 编译为JavaScript正则表达式，并禁用全局、ignoreCase和多行标志。
2. 设置输入的禁用属性，使用户无法更改它，将使它从表单中删除，因此它将不会被验证。
3. 将某些样式应用为*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!');
    }
})

这里有一个jsFiddle的例子。.

---

编辑

你可以设置错误报告的样式，并调整代码，使其看起来和行为符合你的要求。 下面是一个例子.

Answer 3

一个非常好的jquery插件来验证你的表格是Mike Alsup的。http:/jquery.malsup.comform。

它是文档化的，兼容ajax。

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

你可以添加同一作者的blockUI插件来提高用户的体验，并且在启用javascript的情况下，不必管理表单的双重提交。http:/jquery.malsup.comblock