Совмещение двух скриптов

@FranSe · Регистрация: 14.01.2015

Author24 — интернет-сервис помощи студентам

Ребята привет. Такое вот дело, есть скрипт(1), проверяет правильность введенной информации в форме, в случае ошибок не отправляет форму. Есть скрипт(2), при нажатии на кнопку отправить форму, выполняет появление модального окна. Задача состоит в том, чтобы выполнить скрипт 2, после успешного выполнения скрипта 1.
Т.е. если форма не отправляется по причине пустых полей формы или неправильного заполнения полей, тогда скрипт 2 не должен выполняться. Помогите решить, заранее благодарен)

Скрипт 1:

Javascript

function validate_form ()
{
    var x=document.forms["form_v"]["you_email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    valid = true;
        if (( document.form_v.you_name.value == "" ) || ( document.form_v.you_phone.value == "" ) || ( document.form_v.you_email.value == "" ))
        {
                alert ( "Пожалуйста заполните все поля." );
                valid = false;
        } else {
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
        alert("Не правильный адрес e-mail");
        return false;
        }
        return valid;
        }
}

скрипт 2:

Javascript

$(document).ready(function() {
    $('#go').click( function(event){
        $('#overlay').fadeIn(400,
            function(){
                $('#modal_form') 
                    .css('display', 'block')
                    .animate({opacity: 1, top: '50%'}, 200);
        });
    });
    /* Закрытие модального окна */
    $('#modal_close, #overlay').click( function(){
        $('#modal_form')
            .animate({opacity: 0, top: '45%'}, 200,
                function(){
                    $(this).css('display', 'none');
                    $('#overlay').fadeOut(400);
                }
            );
    });
});

@saden · 15.01.2015, 12:09

А чем if не подходит?

@FranSe · 15.01.2015, 12:24 **[ТС]**

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

Javascript

function validate_form ()
{
    var x=document.forms["form_v"]["you_email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    valid = true;
        if (( document.form_v.you_name.value == "" ) || ( document.form_v.you_phone.value == "" ) || ( document.form_v.you_email.value == "" ))
        {
                alert ( "Пожалуйста заполните все поля." );
                valid = false;
        } else {
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
        alert("Не правильный адрес e-mail");
        return false;
        }
        return valid;
        }
        if $(document).ready(function() {
    $('#go').click( function(event){
        $('#overlay').fadeIn(400,
            function(){
                $('#modal_form') 
                    .css('display', 'block')
                    .animate({opacity: 1, top: '50%'}, 200);
        });
    });
    /* Закрытие модального окна */
    $('#modal_close, #overlay').click( function(){
        $('#modal_form')
            .animate({opacity: 0, top: '45%'}, 200,
                function(){
                    $(this).css('display', 'none');
                    $('#overlay').fadeOut(400);
                }
            );
    });
});
}

@saden · 15.01.2015, 12:26

Обработчик клика начинается после $('#go').click( function(event){
Ставь иф на первый скрипт

@FranSe · 15.01.2015, 12:38 **[ТС]**

Не могу правильно оформить, куда то не там ставлю иф.. Мне нужно что-нибудь стирать из первых строк второго скрипта или нет?

@saden · 15.01.2015, 12:41

Javascript

1	$('#go').click( function(event){if(validate_form ()){script2}else{проверка не пройдена}

@FranSe · 15.01.2015, 12:49 **[ТС]**

выходит это не верно, что второй скрипт, нужно интегрировать в первый, а не первый во второй? Я еще сильнее запутался((

@saden · 15.01.2015, 12:52

У Вас смешивание способов программирования. По логике (если я правильно понял), надо в реакции на нажатие кнопки сначала проверить, потом всплыть. Если коротко, то

HTML5

1	<input ... onclick="if(проверить){всплыть}"

Но у Вас идет перехват клика через свойства документа. Значит, проверять надо в нем

@FranSe · 15.01.2015, 12:59 **[ТС]**

Верно. По клику, сначала выполняется обработчик, если условия соблюдены, необходимо выполнить скрипт 2.

@saden · 15.01.2015, 13:01

Ну вот, значит
1)запускается обработчик (это скрипт 2)
2)запускается скрипт 1 (из обработчика)
3)в случае ОК продолжается скрипт 2, иначе - нет

@FranSe · 16.01.2015, 10:46 **[ТС]**

Нет, как то не так. Потому что в случае ОК, запускается а не продолжается скрипт 2(он и есть появление модального окна)

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

Добавлено через 21 час 31 минуту
Ребят, на данный момент скрипт выглядет так:

Javascript

$('#go').click( function(event) {
    if (!validate_form ())
    {
    var x=document.forms["form_v"]["you_email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    valid = true;
        if (( document.form_v.you_name.value == "" ) || ( document.form_v.you_phone.value == "" ) || ( document.form_v.you_email.value == "" ))
        {
                alert ( "Пожалуйста заполните все поля." );
                valid = false;
        } else {
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
        alert("Не правильный адрес e-mail");
        return false;
        }
        return valid;
        if $(document).ready(function() 
        $('#overlay').fadeIn(400,
            function(){
                $('#modal_form') 
                    .css('display', 'block')
                    .animate({opacity: 1, top: '50%'}, 200);
        });
        $('#modal_close, #overlay').click( function(){      /* Закрытие модального окна */
            $('#modal_form')
                .animate({opacity: 0, top: '45%'}, 200,
                    function(){
                        $(this).css('display', 'none');
                        $('#overlay').fadeOut(400);
                    });
        });
);
}
}
});

Но он не работает((( Не понимаю почему((

@saden · 16.01.2015, 10:50

Потому, что остался ретурн от первого скрипта. Он (они) останавливают всю работу.

@FranSe · 16.01.2015, 12:05 **[ТС]**

я так понимаю мешает только return valid, т.к. returne false правильно выполняет свою функцию. (нужно ведь о)

В это скрипте я убрал return valid в самый низ.

Javascript

$('#go').click( function(event) {
    if (!validate_form ())
    {
    var x=document.forms["form_v"]["you_email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    valid = true;
        if (( document.form_v.you_name.value == "" ) || ( document.form_v.you_phone.value == "" ) || ( document.form_v.you_email.value == "" ))
        {
                alert ( "Пожалуйста заполните все поля." );
                valid = false;
        } else {
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
        alert("Не правильный адрес e-mail");
        return false;
        } else {
        if $(document).ready(function() 
        $('#overlay').fadeIn(400,
            function(){
                $('#modal_form') 
                    .css('display', 'block')
                    .animate({opacity: 1, top: '50%'}, 200);
        });
        $('#modal_close, #overlay').click( function(){      /* Закрытие модального окна */
            $('#modal_form')
                .animate({opacity: 0, top: '45%'}, 200,
                    function(){
                        $(this).css('display', 'none');
                        $('#overlay').fadeOut(400);
                    });
        });
);
} return valid;
}
}
});

вот так код не работает((

@saden · 16.01.2015, 12:10

во-первых, оформляйте код по-правилам. Очень радостно сидеть считать скобки...
во-вторых, в коде вызывается validate_form (), а потом снова вставляется ее тело. Надо либо/либо.
в-третих "не работает" - это очень информативно... Выводите алерты по ходу скрипта, смотрите, куда доходит, куда нет

@FranSe · 17.01.2015, 12:15 **[ТС]**

Так а return valid хотя бы на нужном месте или его нужно убрать из кода полностью??

Добавлено через 5 минут
1. Какие нужно соблюсти правила?
2. В коде вызывается validate_form(), он правильно вызывается тем что я восклицательный знак поставил и так же добавил if или нет? "if (!validate_form ()"
3. alert ничего не выводит, даже если я его поставлю вот здесь
$('#go').click( function(event) { alert ( "Пожалуйста заполните все поля." ); и тут далее остальной код..

Добавлено через 4 минуты
Я благодарен что вы мне помогаете. Но неужели 1 человек на форуме сидит. Помогите еще кто-нибудь...

Добавлено через 6 минут
Неужели так трудно помочь, вот говорят мне, оформляйте код по правилам. Ну напишите мне где он оформлен не правильно наглядно. Я так хоть проанализировать эти правила смогу...

Добавлено через 28 минут
При таком коде, все работает, НО, не выскакивает модальное окно. Следовательно, я его не правильно присоеденил в коде.

function validate_form ()
{
var x=document.forms["form_v"]["you_email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
valid = true;
if (( document.form_v.you_name.value == "" ) || ( document.form_v.you_phone.value == "" ) || ( document.form_v.you_email.value == "" ))
{
alert ( "Пожалуйста заполните все поля." );
valid = false;
} else {
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Не правильный адрес e-mail");
return false;
} else {
$(document).ready(function() {
$('#go').click( function(event){
$('#overlay').fadeIn(400,
function(){
$('#modal_form')
.css('display', 'block')
.animate({opacity: 1, top: '50%'}, 200);
});
});
/* Закрытие модального окна */
$('#modal_close, #overlay').click( function(){
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200,
function(){
$(this).css('display', 'none');
$('#overlay').fadeOut(400);
}
);
});
});
}
}
}

Добавлено через 8 часов 53 минуты
Ура!! Сделал!

Добавлено через 11 часов 12 минут
Спасибо sadenу за помощь) Хоть и реализовал немного иначе

@saden 184 / 168 / 53 Регистрация: 27.01.2013 Сообщений: 788
	15.01.2015, 12:09	2
	А чем if не подходит? 0

@saden 184 / 168 / 53 Регистрация: 27.01.2013 Сообщений: 788
	15.01.2015, 12:26	4
	Обработчик клика начинается после $('#go').click( function(event){ Ставь иф на первый скрипт 0

@FranSe 0 / 0 / 0 Регистрация: 14.01.2015 Сообщений: 32
	15.01.2015, 12:38 [ТС]	5
	Не могу правильно оформить, куда то не там ставлю иф.. Мне нужно что-нибудь стирать из первых строк второго скрипта или нет? 0

@FranSe 0 / 0 / 0 Регистрация: 14.01.2015 Сообщений: 32
	15.01.2015, 12:49 [ТС]	7
	выходит это не верно, что второй скрипт, нужно интегрировать в первый, а не первый во второй? Я еще сильнее запутался(( 0

@FranSe 0 / 0 / 0 Регистрация: 14.01.2015 Сообщений: 32
	15.01.2015, 12:59 [ТС]	9
	Верно. По клику, сначала выполняется обработчик, если условия соблюдены, необходимо выполнить скрипт 2. 0

@saden 184 / 168 / 53 Регистрация: 27.01.2013 Сообщений: 788
	15.01.2015, 13:01	10
	Ну вот, значит 1)запускается обработчик (это скрипт 2) 2)запускается скрипт 1 (из обработчика) 3)в случае ОК продолжается скрипт 2, иначе - нет 0

@saden 184 / 168 / 53 Регистрация: 27.01.2013 Сообщений: 788
	16.01.2015, 10:50	12
	Потому, что остался ретурн от первого скрипта. Он (они) останавливают всю работу. 0

@saden 184 / 168 / 53 Регистрация: 27.01.2013 Сообщений: 788
	16.01.2015, 12:10	14
	во-первых, оформляйте код по-правилам. Очень радостно сидеть считать скобки... во-вторых, в коде вызывается validate_form (), а потом снова вставляется ее тело. Надо либо/либо. в-третих "не работает" - это очень информативно... Выводите алерты по ходу скрипта, смотрите, куда доходит, куда нет 1

@FranSe 0 / 0 / 0 Регистрация: 14.01.2015 Сообщений: 32
	17.01.2015, 12:15 [ТС]	15
	Так а return valid хотя бы на нужном месте или его нужно убрать из кода полностью?? Добавлено через 5 минут 1. Какие нужно соблюсти правила? 2. В коде вызывается validate_form(), он правильно вызывается тем что я восклицательный знак поставил и так же добавил if или нет? "if (!validate_form ()" 3. alert ничего не выводит, даже если я его поставлю вот здесь $('#go').click( function(event) { alert ( "Пожалуйста заполните все поля." ); и тут далее остальной код.. Добавлено через 4 минуты Я благодарен что вы мне помогаете. Но неужели 1 человек на форуме сидит. Помогите еще кто-нибудь... Добавлено через 6 минут Неужели так трудно помочь, вот говорят мне, оформляйте код по правилам. Ну напишите мне где он оформлен не правильно наглядно. Я так хоть проанализировать эти правила смогу... Добавлено через 28 минут При таком коде, все работает, НО, не выскакивает модальное окно. Следовательно, я его не правильно присоеденил в коде. function validate_form () { var x=document.forms["form_v"]["you_email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); valid = true; if (( document.form_v.you_name.value == "" ) \|\| ( document.form_v.you_phone.value == "" ) \|\| ( document.form_v.you_email.value == "" )) { alert ( "Пожалуйста заполните все поля." ); valid = false; } else { if (atpos<1 \|\| dotpos<atpos+2 \|\| dotpos+2>=x.length) { alert("Не правильный адрес e-mail"); return false; } else { $(document).ready(function() { $('#go').click( function(event){ $('#overlay').fadeIn(400, function(){ $('#modal_form') .css('display', 'block') .animate({opacity: 1, top: '50%'}, 200); }); }); /* Закрытие модального окна / $('#modal_close, #overlay').click( function(){ $('#modal_form') .animate({opacity: 0, top: '45%'}, 200, function(){ $(this).css('display', 'none'); $('#overlay').fadeOut(400); } ); }); }); } } } Добавлено через 8 часов 53 минуты* Ура!! Сделал! Добавлено через 11 часов 12 минут Спасибо sadenу за помощь) Хоть и реализовал немного иначе 0