对于自定义图像选择工具,我想创建基于 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="{"min":1,"max":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="{"min":1,"max":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/