Помощь разобратся в скрипте

BSandro · November 27, 2013

На просторах интернета, нашел пошаговую регистрацию на javascript

Так как я еще учу javascript, не быстро, но пытаюсь...

Не поможете ли вы разобраться с данным скриптом

содержит jquery.inputfocus-0.9.min

$(function(){    //original field values    var field_values = {            //id        :  value            'username'  : 'Логин',            'password'  : 'Пароль',            'cpassword' : 'Пароль',            'firstname'  : 'Имя',            'lastname'  : 'Фамилия',            'email'  : 'email'    };    //inputfocus    $('input#username').inputfocus({ value: field_values['username'] });    $('input#password').inputfocus({ value: field_values['password'] });    $('input#cpassword').inputfocus({ value: field_values['cpassword'] });     $('input#lastname').inputfocus({ value: field_values['lastname'] });    $('input#firstname').inputfocus({ value: field_values['firstname'] });    $('input#email').inputfocus({ value: field_values['email'] });     //reset progress bar    $('#progress').css('width','0');    $('#progress_text').html('0% Выполнено');    //first_step    $('form').submit(function(){ return false; });    $('#submit_first').click(function(){        //remove classes        $('#first_step input').removeClass('error').removeClass('valid');        //ckeck if inputs aren't empty        var fields = $('#first_step input[type=text], #first_step input[type=password]');        var error = 0;        fields.each(function(){            var value = $(this).val();            if( value.length<4 || value==field_values[$(this).attr('id')] ) {                $(this).addClass('error');                $(this).effect("shake", { times:3 }, 50);                                error++;            } else {                $(this).addClass('valid');            }        });                        if(!error) {            if( $('#password').val() != $('#cpassword').val() ) {                    $('#first_step input[type=password]').each(function(){                        $(this).removeClass('valid').addClass('error');                        $(this).effect("shake", { times:3 }, 50);                    });                                        return false;            } else {                   //update progress bar                $('#progress_text').html('33% Выполнено');                $('#progress').css('width','113px');                                //slide steps                $('#first_step').slideUp();                $('#second_step').slideDown();                 }                       } else return false;    });    $('#submit_second').click(function(){        //remove classes        $('#second_step input').removeClass('error').removeClass('valid');        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;          var fields = $('#second_step input[type=text]');        var error = 0;        fields.each(function(){            var value = $(this).val();            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {                $(this).addClass('error');                $(this).effect("shake", { times:3 }, 50);                                error++;            } else {                $(this).addClass('valid');            }        });        if(!error) {                //update progress bar                $('#progress_text').html('66% Выполнено');                $('#progress').css('width','226px');                                //slide steps                $('#second_step').slideUp();                $('#third_step').slideDown();             } else return false;    });    $('#submit_third').click(function(){        //update progress bar        $('#progress_text').html('100% Выполнено');        $('#progress').css('width','339px');        //prepare the fourth step        var fields = new Array(            $('#username').val(),            $('#password').val(),            $('#email').val(),            $('#firstname').val() + ' ' + $('#lastname').val(),            $('#age').val(),            $('#gender').val(),            $('#country').val()                               );        var tr = $('#fourth_step tr');        tr.each(function(){            //alert( fields[$(this).index()] )            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);        });                        //slide steps        $('#third_step').slideUp();        $('#fourth_step').slideDown();                });    $('#submit_fourth').click(function(){        //send information to server        alert('Данные отправлены');    });});

Я хочу написать примерно такого рода но немного в другую степень...

Я вот немного тут по разбирал код

$('#third_step').slideUp(); //выводит слайд сверху $('#fourth_step').slideDown(); // выводит слайд снзу// то есть при нажатий кнопки "далее" слайд уходит в верх и вылазит новый снизу.$('#progress_text').html('33% Выполнено');$('#progress').css('width','113px');// Ну тут понятно с каждым шагом мы меняем название, например с 0% выполнено на 33% выполнено//Ну и конечно задаем  новые параметры полоски, в нашем случай это widh:113px $('#submit_fourth').click(function(){//send information to serveralert('Данные отправлены');});//Тут в самом начале уроке говорилось про alert() про сплывающее окно!//Я к сожалению не дошел до функций, но чуть чуть их понимаю$(function(){//original field valuesvar field_values = {//id : value'username' : 'Логин','password' : 'Пароль','cpassword' : 'Пароль','firstname' : 'Имя','lastname' : 'Фамилия','email' : 'email'};//Как видно тут, мы функций с переменной filed_values присваиваем//ниже приведенную таблицу.

Я хочу сделать почти что то в этом роде..

Только немного по другому..

Допустим первое у нас имя, второе фамилия..

А дальше уже прикрепить проверку, введены ли туда какие то данные..

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

Например:

Поле не может быть пустым, введите имя от 3 до 12 символов

так же у второго...

Но написать я хочу это уже с вашей поддержкой...

Как говорится не что бы там вы за меня все написали, а если я где то что то не так сделал, вы мне бы подсказали.

Ну пожалуй я начну:

$(function(){    var form_values  = {            'firstname'  : 'Имя',            'lastname'   : 'Фамилия'    };$('input#firstname').inputfocus({ value: form_values['firstname'] });$('input#lastname').inputfocus({ value: form_values['lastname'] });//для кнопки submit$('form').submit(function(){ return false; });$('#submit_step1').click(function(){ //сама кнопка у нее свое значение name=""$('#step input').removeClass('error').removeClass('valid'); // это у нас для того что бы удалить предыдущий класс// и потом уже что бы появился новый класс, по другому новая форма.

А вот дальше надо сделать проверку к сожалению до этого допереть не могу..

Edited November 27, 2013 by BSandro

Great Rash · November 29, 2013

Проверку чего вы хотите сделать?

BSandro · November 29, 2013

On 11/29/2013 at 11:06 AM, Great Rash said:
Проверку чего вы хотите сделать?

Думал уже не кто не отпишется...

Проверку этих полей, что это обязательно и тд...

я через if else знаю как сделать, но тут другой случай.

Да и я могу сделать только на проверку чего то, а во именно задать сколько символов макс и мин вводить не могу.

swandev · November 30, 2013

On 11/29/2013 at 8:29 PM, BSandro said:

On 11/29/2013 at 11:06 AM, Great Rash said:
Проверку чего вы хотите сделать?
Думал уже не кто не отпишется...
Проверку этих полей, что это обязательно и тд...

я через if else знаю как сделать, но тут другой случай.

Да и я могу сделать только на проверку чего то, а во именно задать сколько символов макс и мин вводить не могу.

Есть замечательный плагин jquery.validate

BSandro · November 30, 2013

On 11/30/2013 at 3:38 AM, ALEEX SWN said:

On 11/29/2013 at 8:29 PM, BSandro said:

On 11/29/2013 at 11:06 AM, Great Rash said:
Проверку чего вы хотите сделать?
Думал уже не кто не отпишется...
Проверку этих полей, что это обязательно и тд...

я через if else знаю как сделать, но тут другой случай.

Да и я могу сделать только на проверку чего то, а во именно задать сколько символов макс и мин вводить не могу.

Есть замечательный плагин jquery.validate

именно к этому я и виду, что я еще учу Javascript (а про jquery даже пока говорить не хочу :-)

И я что то до сих пор догнать не могу, а зачем знак $ перед $(function() и тд...

Edited November 30, 2013 by BSandro

cyklop77 · December 2, 2013

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

jquey.validate очень просто настроить, для этого совсем не обязательно понимать

Quote
зачем знак $ перед $(function() и тд...

его нужно просто подключить и заменить id на твои

Edited December 2, 2013 by cyklop77

Great Rash · December 2, 2013

Почитайте эту тему. Вам станет многое понятно, а потом прикрутите себе jQuery и плагин валидации.

BSandro · December 3, 2013

On 12/2/2013 at 7:47 AM, Great Rash said:
Почитайте эту тему. Вам станет многое понятно, а потом прикрутите себе jQuery и плагин валидации.

Оо спасибо большое, обязательно почитаю.

Я как бы очень быстро выучил Javascript примерно за 4-5 дней...

В специалисте видео по 2 часа которые...

4-5 дней подряд смотрел, накидал шпаргалок для себя, а щас вот нужна практика....

Но опять проблема, на свое ДР уезжаю в пермь к друзьям, то что учил на смарку уйдет скорей всего

Edited December 3, 2013 by BSandro

swandev · December 3, 2013

On 12/3/2013 at 2:24 AM, BSandro said:

On 12/2/2013 at 7:47 AM, Great Rash said:
Почитайте эту тему. Вам станет многое понятно, а потом прикрутите себе jQuery и плагин валидации.
Оо спасибо большое, обязательно почитаю.

Я как бы очень быстро выучил Javascript примерно за 4-5 дней...

В специалисте видео по 2 часа которые...
4-5 дней подряд смотрел, накидал шпаргалок для себя, а щас вот нужна практика....
Но опять проблема, на свое ДР уезжаю в пермь к друзьям, то что учил на смарку уйдет скорей всего

Никто не может так быстро выучить.

Для этого нужны не дни, а годы!

BSandro · December 3, 2013

On 12/3/2013 at 2:45 AM, ALEEX SWN said:

On 12/3/2013 at 2:24 AM, BSandro said:

On 12/2/2013 at 7:47 AM, Great Rash said:
Почитайте эту тему. Вам станет многое понятно, а потом прикрутите себе jQuery и плагин валидации.
Оо спасибо большое, обязательно почитаю.

Я как бы очень быстро выучил Javascript примерно за 4-5 дней...

В специалисте видео по 2 часа которые...
4-5 дней подряд смотрел, накидал шпаргалок для себя, а щас вот нужна практика....
Но опять проблема, на свое ДР уезжаю в пермь к друзьям, то что учил на смарку уйдет скорей всего

Никто не может так быстро выучить.
Для этого нужны не дни, а годы!

Ну если по сидеть по 15 часов в сутки и целый день учить то все возможно, так как я уже знал if else из php

и некоторые функций

Animkim · December 3, 2013

Наверно имелось ввиду базовые принципы, я тоже недавно начал учить, http://learn.javascript.ru/ тут прошел Основы JavaScript, в общем все понятно, теперь практиковать надо для закрепления.

BSandro · December 3, 2013

On 12/3/2013 at 3:30 AM, Animkim said:
Наверно имелось ввиду базовые принципы, я тоже недавно начал учить, http://learn.javascript.ru/ тут прошел Основы JavaScript, в общем все понятно, теперь практиковать надо для закрепления.

я не тут учил видео специалист

http://www.youtube.com/user/TechnologiesWeb/videos

вот с этого http://www.youtube.com/watch?v=7I5gSJQmi-M

и пошло поехало )

Да и у меня вообще желание выучить

HTML,CSS,Javascript,php,mysql

И полностью работать с ними на любой сложности...

Я даже потом в Москву поеду на эти платные курсы что бы корочки получить...

Ибо без бумажки ты букашка :-)

Edited December 3, 2013 by BSandro

Animkim · December 3, 2013

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

BSandro · December 3, 2013

On 12/3/2013 at 3:35 AM, Animkim said:
Мне просто легче понимать материал текстовый, не переношу видео уроки, большинство авторов косячат по жесткому и этим косякам учат других, потом переучиваться сложнее.

Вот именно что написано на сайтах 20 раз переписано, а видео это с курсов в Москве...

Так что тут ошибок не может быть..

Вот сайт их http://www.specialist.ru/

Animkim · December 3, 2013

Странная логика, сайт читают тысячи человек, выходит несколько сотен человек его постоянно правят, указывают на неточности, переводы с официальных источников, а тут какой-то чувак с МОСКВЫ истина в последней инстанции. Не пытаюсь вас переубедить, просто высказал свое мнение.

BSandro · December 3, 2013

On 12/3/2013 at 3:46 AM, Animkim said:
Странная логика, сайт читают тысячи человек, выходит несколько сотен человек его постоянно правят, указывают на неточности, переводы с официальных источников, а тут какой-то чувак с МОСКВЫ истина в последней инстанции. Не пытаюсь вас переубедить, просто высказал свое мнение.

Какой чувак с Москвы ? сам понимаешь что говоришь...

Это компания они уже хрен знает сколько работают...

Правят некоторые люди?

Когда я начал изучать html,css на 20 сайтах по разному написано, а вот 1 htmlbok.ru помог мне

Так что лучше вам не стоит говорить то что не знаете совсем

swandev · December 3, 2013

On 12/3/2013 at 3:31 AM, BSandro said:

On 12/3/2013 at 3:30 AM, Animkim said:
Наверно имелось ввиду базовые принципы, я тоже недавно начал учить, http://learn.javascript.ru/ тут прошел Основы JavaScript, в общем все понятно, теперь практиковать надо для закрепления.
я не тут учил видео специалист
http://www.youtube.com/user/TechnologiesWeb/videos

вот с этого http://www.youtube.com/watch?v=7I5gSJQmi-M

и пошло поехало )

Да и у меня вообще желание выучить

HTML,CSS,Javascript,php,mysql

И полностью работать с ними на любой сложности...

Я даже потом в Москву поеду на эти платные курсы что бы корочки получить...

Ибо без бумажки ты букашка :-)

Забавно) Первый раз смотрю видео от специалиста, не могу обращать внимание на повторение слов/словосочетаний

swandev · December 3, 2013

после 38 минуты не осталось терпения, выключил

жаль что потратил время

http://learn.javascript.ru/ намного полезней, еще уроки sorax'a на ютубе

BSandro · December 3, 2013

On 12/3/2013 at 4:44 AM, ALEEX SWN said:
после 38 минуты не осталось терпения, выключил
жаль что потратил время

http://learn.javascript.ru/ намного полезней, еще уроки sorax'a на ютубе

брехню не неси, нравится читай, а объясняет он там вполне прилично...

потому что вначале не интересно еще, такое же было...

Интересно чем же они полезны, вы выучите Javascript на 200-300%

Я вам обещаю если прочитаете мое это ?

Если да то читай те дальше свои полезности, только для себя и не кому не рекомендуйте

Edited December 3, 2013 by BSandro

swandev · December 3, 2013

On 12/3/2013 at 4:51 AM, BSandro said:

On 12/3/2013 at 4:44 AM, ALEEX SWN said:
после 38 минуты не осталось терпения, выключил
жаль что потратил время

http://learn.javascript.ru/ намного полезней, еще уроки sorax'a на ютубе
брехню не неси, нравится читай, а объясняет он там вполне прилично...
потому что вначале не интересно еще, такое же было...

Я не говорил что он плохо объясняет. Просто много лишней информации, я считаю что не стоит тратить на это время.

BSandro · December 3, 2013

On 12/3/2013 at 4:03 AM, ALEEX SWN said:

On 12/3/2013 at 3:31 AM, BSandro said:

On 12/3/2013 at 3:30 AM, Animkim said:
Наверно имелось ввиду базовые принципы, я тоже недавно начал учить, http://learn.javascript.ru/ тут прошел Основы JavaScript, в общем все понятно, теперь практиковать надо для закрепления.
я не тут учил видео специалист
http://www.youtube.com/user/TechnologiesWeb/videos

вот с этого http://www.youtube.com/watch?v=7I5gSJQmi-M

и пошло поехало )

Да и у меня вообще желание выучить

HTML,CSS,Javascript,php,mysql

И полностью работать с ними на любой сложности...

Я даже потом в Москву поеду на эти платные курсы что бы корочки получить...

Ибо без бумажки ты букашка :-)

Забавно) Первый раз смотрю видео от специалиста, не могу обращать внимание на повторение слов/словосочетаний

интересно что тут смешного?

Могу сказать если вы придрались к этому то вам лет 15 не больше....

Человек объясняет внятно и понятно

On 12/3/2013 at 4:55 AM, ALEEX SWN said:

On 12/3/2013 at 4:51 AM, BSandro said:

On 12/3/2013 at 4:44 AM, ALEEX SWN said:
после 38 минуты не осталось терпения, выключил
жаль что потратил время

http://learn.javascript.ru/ намного полезней, еще уроки sorax'a на ютубе
брехню не неси, нравится читай, а объясняет он там вполне прилично...
потому что вначале не интересно еще, такое же было...

Я не говорил что он плохо объясняет. Просто много лишней информации, я считаю что не стоит тратить на это время.

Например?

На оборот он объясняет все по порядку что пригодится, еще разжевывает и в рот ложит ....

swandev · December 3, 2013

On 12/3/2013 at 4:57 AM, BSandro said:

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много.

Edited December 3, 2013 by ALEEX SWN

BSandro · December 3, 2013

On 12/3/2013 at 5:18 AM, ALEEX SWN said:

On 12/3/2013 at 4:57 AM, BSandro said:

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много.

в чем проблема? начинай со 2 или с 3 сразу...

Если ты знаешь конечно, нахера тебе знать что такое alert(); если ты и так его знаешь

ты бред несешь иди на улицу сходи лучше, свежим воздухом по дыши, иногда знаешь полезно

swandev · December 3, 2013

On 12/3/2013 at 8:46 AM, BSandro said:

On 12/3/2013 at 5:18 AM, ALEEX SWN said:

On 12/3/2013 at 4:57 AM, BSandro said:

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много.

в чем проблема? начинай со 2 или с 3 сразу...
Если ты знаешь конечно, нахера тебе знать что такое alert(); если ты и так его знаешь

ты бред несешь иди на улицу сходи лучше, свежим воздухом по дыши, иногда знаешь полезно

Откуда такая агрессия? Я лишь высказал свое мнение.

Animkim · December 3, 2013

BSandro, в профиле вроде 19 лет, а такое ощущение как будто 13.

Edited December 3, 2013 by Animkim

Sign In

Помощь разобратся в скрипте

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information