Пользовательская функция проверки формы элемента с 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/

ОТВЕТЫ

Ответ 1

Если я правильно понимаю, что вам нужно, я думаю, вы можете достичь того, что вы пытаетесь сделать, используя атрибут любого элемента ввода.

Я создал очень простую форму

Вы использовали бы стандартную проверку подлинности html5 по умолчанию, но вам может потребоваться небольшая настройка, чтобы заставить ее работать.

Однако, если вы попытаетесь таким образом, вы должны иметь в виду пару вещей:

Как объяснено в , patttern компилируется как регулярное выражение JavaScript с отключенными глобальными, ignoreCase и многострочными флагами. Настройка отключенного свойства вашего ввода, чтобы пользователь не мог его изменить, выведет его из формы и, следовательно, не будет проверен Применение определенных стилей как * display: none "к элементу ввода может привести к ошибкам при неудачной проверке, и браузер пытается сосредоточиться на элементе.

Я надеюсь, что это поможет

Ответ 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.

Edit

Вы можете настроить отчет об ошибках и настроить код, посмотреть и вести себя, как бы вы этого ни хотели. Вот пример.

Ответ 3

Очень хороший плагин jquery для проверки ваших форм - это Майк Альсуп. Вы найдете его здесь: http://jquery.malsup.com/form/

Документировано, совместимо с ajax.

Он может выполнять сериализацию для одного поля или для всех полей внутри формы, поэтому это большое преимущество в отношении вашей проблемы, которое вам может понадобиться для обработки проверок полей и логики ошибок с вашими формами.

Вы можете добавить плагин blockUI того же автора, чтобы улучшить пользовательский интерфейс, и не нужно управлять двойной передачей формы при включенном javascript. http://jquery.malsup.com/block/