Пользовательская функция проверки формы элемента с html 5

Для специального инструмента выбора изображения я хотел бы создать проверку формы на основе проверки формы 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 браузерах, но используя, надеюсь, существующее событие.

Im ищет что-то вроде этого:

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

Ответы

$('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;
});

$('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!');
    }
})