Плагин проверки JQuery: предотвращение проблемы проверки во вложенной форме - PullRequest
Новая
       22

Плагин проверки JQuery: предотвращение проблемы проверки во вложенной форме

2 голосов
/ 05 июня 2010

У меня есть форма, в которой я использую проверку. В этой форме есть раздел для загрузки фотографий. Первоначально этот раздел содержит шесть элементов со следующим кодом: 

<img class="photo_upload" src="image/app/photo_upload.jpg">

Я связал функцию с событием click для класса photo_upload. Эта функция заменяет изображение в минимальной форме следующим кодом: Скопировать код 

<form onsubmit="startUploadImage();" target="control_target"
enctype="multipart/form-data" method="post" action="index.php">
<input type="hidden" value="add_image" name="service">
<input type="hidden" value="1000000" name="MAX_FILE_SIZE">
<input type="file" size="10" name="photo" id="photo_file_upload"><br>
<button onclick="javascript:cancel_photo_upload();return false;">Cancel</button>
</form>

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

validator is undefined
http://host.com/path/index.php
Line 286

Что здесь происходит? Я думаю, это

  1. Отправить событие пузыри до внешней формы
  2. Поскольку у нас есть проверка в этой форме, проверка запускается,
  3. Валидация пытается найти форму, запускающую ее,
  4. Так как мы не привязали валидацию к внутренней форме, возвращается 'undefined'

Теперь, моя оценка верна? Является ли это или нет, как я могу решить эту проблему?

Ответы [ 2 ]

2 голосов
/ 06 июня 2010

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

1 голос
/ 02 августа 2016

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

jquery.validate.js v1.15.0, строки 401 - 408: 

function delegate( event ) {
    var validator = $.data( this.form, "validator" ),
        eventType = "on" + event.type.replace( /^validate/, "" ),
        settings = validator.settings;
    if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
        settings[ eventType ].call( validator, this, event );
    }
}

Моя исправленная версия: 

function delegate( event ) {
    if (this.form === event.delegateTarget) {
        var validator = $.data( this.form, "validator" ),
            eventType = "on" + event.type.replace( /^validate/, "" ),
            settings = validator.settings;
        if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
            settings[ eventType ].call( validator, this, event );
        }
    }
}

Исправление минимизированной версии (jquery.validate.js упаковано для распространения с использованием grunt с uglify) сложнее, но не невозможно function delegate(event) становится function b(b).

Альтернативный подход заключается в исправлении селектора, используемого при связывании delegate. Я считаю, что это более сложное исправление, но производительность браузера будет чуть лучше.

...