Откройте Fancybox после отправки формы, только если LiveValidation прошла успешно

Я использую LiveValidation в форме отправки, которая включает 1-4 поля для загрузки изображений. Что клиенты нетерпеливы, так это то, что как только они нажимают «Отправить», форма начинает загружать изображения, и это занимает время в зависимости от размера этих изображений.

Я пытался добиться того, чтобы после отправки пользователем формы и прохождения LiveValidation появилось всплывающее окно Fancybox с загружаемым изображением и некоторым текстом. Мне не нужен индикатор выполнения загрузки, поскольку на хостинге клиента нет расширения загрузки PECL или APC, и я не хочу использовать AJAX по соображениям совместимости.

Я просто хочу, чтобы загрузочное изображение вращалось на экране, чтобы пользователь знал, что ему нужно подождать.

Я попытался создать для нее функцию и настроить ее на выполнение в событиях «onSubmit» и «onClick», но в любом случае всплывающее окно появляется, даже если в форме есть ошибки, на которые указывает LiveValidation. .

Кроме того, я предполагаю, что после загрузки изображений и отправки формы страница автоматически перенаправится на подтверждение.

Я плохо разбираюсь в javascript и, следовательно, не смог манипулировать скриптами для достижения желаемых результатов.

Любая помощь в этом будет принята с благодарностью. Также, если у кого-то есть лучшее решение, это тоже будет здорово!

Спасибо :)

для проверки в реальном времени я использую скрипт прямо с веб-сайта: http://livevalidation.com/

Вот инициация livevalidation и fancybox:

    <script type="text/javascript">
    $(document).ready(function () { 
        $(".form-validate-label").validate();
        $(".form-validate-p").validate({errorElement: "p"});
        $(".popup").fancybox();
    });

    </script>

Сама форма довольно большая, но вот область полей:

    <form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p" enctype="multipart/form-data" action="">
    ...
    ...
    <div class="regrow1">
            <div>
                <label class="label-large"><span class="required">*</span>Headshot Image File:</label>
                <input class="required"  name="head_shot" id="head_shot" size="40" type="file" />
            </div>
        </div>
        <div class="regrow2">
            <div>
                <label class="label-large">Attach Resume:</label>
                <input name="txtcv" id="txtcv" size="40" type="file" />
            </div>
        </div>
        <div class="regrow1">
            <div>
                <label class="label-large">Full body shot Image File:</label>
                <input  id="body_shot" name="body_shot" size="40" type="file" />
            </div>
        </div>
        <div class="regrow2">
            <div>
                <label class="label-large">Sanpshot Image File:</label>
                <input id="snap_shot" name="snap_shot" size="40" type="file" />
            </div>
        </div>

        <br /><br />

        <div id="submitrow">
        <button id="submit" name="submit" value="Submit" type="submit">Submit</button>
        </div>
    </form>

javascript php fancybox livevalidation
person salmanhijazi    schedule 07.05.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вместо использования fancybox и других подходов. если вы используете plupload, я думаю, что это будет хороший интерфейс uload и функция статуса загрузки. Ниже приведена ссылка. Пожалуйста, посмотрите, это может вам помочь.

http://www.plupload.com/example_queuewidget.php

вместо show fancybox я добавил один div с его loadId. изначально он будет скрыт, когда вы нажмете кнопку отправки, он покажет div, внутри этого div вы вращаете путь к изображению. вот полный код.

я использую jquery для скрытия шоу. если вы не хотите использовать jquery, вы также можете использовать javascript для скрытия и отображения.

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title></title>

                <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>

                <script src="Js/LiveValidation.js" type="text/javascript"></script>

                <script type="text/javascript">
                    $(document).ready(function() {
                        $(".form-validate-label").validate();
                        $(".form-validate-p").validate({ errorElement: "p" });
                        $(".popup").fancybox();
                    });
                    function showloading() {
                        $("#loadingId").show();
                    }
                </script>

            </head>
            <body>
                <form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p"
                enctype="multipart/form-data" action="">
                <div class="regrow1">
                <div id="loadingId" style="display:none;">Loading....</div>
                    <div>
                        <label class="label-large">
                            <span class="required">*</span>Headshot Image File:</label>
                        <input class="required" name="head_shot" id="head_shot" size="40" type="file" />
                    </div>
                </div>
                <div class="regrow2">
                    <div>
                        <label class="label-large">
                            Attach Resume:</label>
                        <input name="txtcv" id="txtcv" size="40" type="file" />
                    </div>
                </div>
                <div class="regrow1">
                    <div>
                        <label class="label-large">
                            Full body shot Image File:</label>
                        <input id="body_shot" name="body_shot" size="40" type="file" />
                    </div>
                </div>
                <div class="regrow2">
                    <div>
                        <label class="label-large">
                            Sanpshot Image File:</label>
                        <input id="snap_shot" name="snap_shot" size="40" type="file" />
                    </div>
                </div>
                <br />
                <br />
                <div id="submitrow">
                    <button id="submit" name="submit" value="Submit" type="submit" onclick="showloading();">Submit</button>
                </div>
                </form>
            </body>
            </html>
person Humayoo    schedule 07.05.2012
comment
Это слишком обширно для моих нужд. Мне нужно простое решение, которое я могу реализовать, просто добавив несколько строк кода. И все 4 поля изображений должны быть отдельными. - person salmanhijazi; 07.05.2012
comment
Проблема в том, что при этом, если какое-либо из полей имеет недопустимые данные или пусто, сценарий проверки в реальном времени выделяет это поле перед отправкой формы. Форма отправляется только после правильного заполнения всех полей. Если я использую ваше решение, загрузочный div появится, даже если форма отправлена ​​​​с пустыми полями. - person salmanhijazi; 07.05.2012
comment
скрыть загрузочный div, когда проверка формы не удалась. - person Humayoo; 08.05.2012