Multi Step Registration Form Using JQuery Bootstrap in PHP

hi friends in this video tutorial we are going to learn how to create a form with multiple steps register in form by using jQuery and bootstrap with PHP script if you are you looking for a creative registration form with multiple steps for your web application then you can get reference of this video tutorial because here we have make simple registration form in which we have divided whole form in different group and user can enter details as per group item for make multi-step registration form we will use bootstrap library and jQuery library with PHP and my SQL for make multi-step registration form we will use bootstrap library and jQuery library with PHP and my SQL you now let's start discussing this topic so this is our testing database and in this we have one login table with a table column like ID first name last name gender email password address and mobile number here we have divided registration form into different section first section will be login details in which user can enter email and password details second section will be personal details in which user will enter first name last name and gender details and in third section user will enter address and mobile number details this is our index page and on this page we have already included jQuery and bootstrap library link first we have make HTML form with attribute method is equal to post and ID is equal to register form under this form first we have to make tab for this we will use bootstrap library so we have write an order list tag with class is equal to nav and nav tabs here both class will make tab on webpage under this we have right list tag with class is equal to na VI tum' this will make single tab under this we have right anchor text with class is equal to nav link and active tab 1 and ID is equal to list login details and in anchor text we have right login details so here we have make one tab with name login details and here active tab one class has been made by us for set style of active tab for second tab we have right list tag with class is equal to na VI 'tom under this we have right anchor text with class is equal to nav link and inactive tab 1 and ID is equal to list personal details and in text we have right personal details for third tab we have right list tag with class is equal to na VI 'tom under this we have right anchor tag with class is equal to nav link and inactive tab 1 and ID is equal to list contact details and in anchor text we have right contact details for a particular tab content we have right division class is equal to tab content under this tag we will define content of particular to have content under this we have right division tag with classes equal to tab pain and active and ID is equal to login details under this tag we will define login details tab content under this we have use bootstrap panel for display form content so under this panel body tag we have write input type is equal to input type is equal to text name and ID is equal to email under this user can enter email details below this we have write span tag with attribute ID is equal to error email under this we will display validation error same way below we have write input type is equal to password name and ID is equal to password under this user will enter password details below this we have write span tag with attribute ID is equal to error password under this tag we will display validation error for going to next tag we have write button type is equal to button name and ID is equal to button login details and button text is equal to next by click on this we can go to next step now we have defined content for next tab so we have write the vision tag with class is equal to tab pain and fate and ID is equal to personal details under this tag we will display content for personal details tab under this we have write input type is equal to text name and ID is equal to first name below this we have right span tag with ID is equal to error first name under this we will display validation error for first name textbox for enter last name details we have write input type is equal to text name and ID is equal to last name below this tag we have write span tag with ID is equal to error last name under this we will display validation error for last name textbox for select gender we have write input type is equal to radio name is equal to gender and value is equal to mail this option for select mail option same for select female option we have right input type is equal to radio name is equal to gender and value is equal to female for go to previous tab we have defined button with name and ID is equal to previous button personal details by click on this button we can go to previous tab same way for go to next tab we have write button with attribute name and ID is equal to button person details by click on this button we can go to next step now we have write division tag with class is equal to tab pane and fade ID attribute is equal to contact details under this we will define content for contact details tab under this panel we have write text area tag with name and ID is equal to address below this we have right span tag with ID is equal to error address under this we will display validation error for address for enter mobile details we have write input type is equal to text name and ID is equal to mobile number below this we have write span tag with ID is equal to error or mobile number under this we will display validation error for mobile number textbox for go to personal details tab we have write button type is equal to button name and ID is equal to previous button contact details by click on this button we can go to previous registration step lastly we have write button type is equal to button name and ID is equal to button contact details by click on this button we can complete registration process so here friends we can see registration from with multi-step here we can see on login details to have content and we cannot see other two to have content and we cannot go to next content for access other tab content we will use jQuery code we will access only after validation rule properly if there is no validation error then we can go to next step for this we have go to jQuery code and under this we have write dollar with button ID button login details with click event when we have click on login details next button then this code will run under this we have defined two variable like error email an error password with blank value after this we have write filter variable is equal regular expression for validate error in proper format or not now we have write if statement and under this we have write dollar dot trim function and under this we have write dollar dot textbox ID email with value method with length is equal to zero this condition will check if email text box has no value then it will execute if block otherwise it will execute else block of code if above condition true then it will execute if block and under this we have write error email variable as equal to email is required message after this we have write span tag ID error email with text method and under this we have write error email variable it will display validation error below this we have write dollar with textbox ID email with ad class method and under this we have write as error we have already make this class for display validation error but suppose above condition false then it will execute else block of code and under this we have right if statement and under condition we have right not filter variable dot test method and under this we have right textbox ID email with value method this condition will check if email text value is not in proper email format then it will execute if block otherwise it will execute else block of code suppose email is not in proper email format then it will execute if block and under this we have write error email variable is equal to invalid email after this we have write dollar with span tag ID error email with text method and under this we have write error email variable same for validation style format we have write dollar with textbox ID email with add class method and under this we have write as error but suppose email in proper format then it will execute else block of code and under this we have write error email variable is equal to blank value after this we have write dollar with span tag ID error email with text method and under this we have write error email variable now we have write dollar with textbox ID email with remove class method and under this we have write as error this code will remove has error class from email text box for validate password text box we have write if statement and in condition we have write dollar dot trim function and under this we have write dollar with textbox ID password with value method dot length is equal to zero this condition will check if password text box has no value then it will execute if block of code and under this we have write error password variable as equal to password is required for display this error we have write span tag ID error password with text method and under this we have write error password variable after this we have right dollar with text box ID password with IDI class method and under this we have right has error class but supposed password text box has some value then it will execute else block and under this we have right error password variable is equal to blank value below this we have right dollar with span tag ID error password with text method and under this we have right error password variable this will remove error message same way for remove has error class we have right dollar with textbox ID password with remove class method and under this we have right has error class now we have write if statement and under condition we have write error email variable value is not equal to blank or error password variable value is not equal to blank this condition will check if both or even variable value is not equal to blank then it will execute if block of code under this we have write return false statement that means no action will be taken but suppose both variable value is blank then it will execute else block of code and under this we have write dollar with tab link ID list login details with remove class method and under this we have write active and active to have one class this code will remove active and active tab one class from list tag with ID list login details after this for disable login details tab we have write list tag with ID list login details with remove attribute method and under this we have write her F data toggle same we have right to have Content ID login details with removeclass method and under this we have right active class this code will remove active class from login detail to have content tag now we have want to assign inactive tab one class to list tag with ID list login details so we have write dollar with list login details with IDI class and under this we have write inactive to have one class same way we want to remove inactive tab one class from list tag with ID list personal details so we have write dollar with list personal details with remove class method and under this we have write in active tab one class now we have write dollar with list tag ID list personal details with IDI class method and under this we have write active to have one class and active class this code will add this both class two list tag with ID list personal details now we want to link list tag anchor tag to division tag with ID personal details content so we have write dollar with ID list personal details with attribute method and under this we have write ref tag with division tag ID personal details below this we have write dollar with anchor tag ID list personal details with attribute method with two argument like data toggle and tag this code will add data toggle attribute is equal to tab into this list personal details tag and it will make the this tab toggle label after this we have write dollar with division tag ID personal details with edie class method and under this we have white active and in class this two class will be into this tag friends here we can see multi-step registration form and here we can see login details section with details like email and password with next button so we have directly click on next button then we have received validation error on webpage so when we have filled this details then we can go to next step so we have enter email ID and password details and then after we have click on Next button when we have click on Next button we have go to next step to enter personal details here we can also go to previous step or we can also go to next step to fill content details tab also for go to previous step we have write dollar with previous button ID previous button personal detail with click event so when we have click on this button this block of code will execute under this we have write dollar with idealist personal details with removeclass and under this we have write active and active to have one class this code will remove this both class from this tag after this we have write dollar with idealist personal details with remove attribute method and under this we have write ref and data toggle this method will remove her F and data toggle attribute from this tag now we have write dollar with division tag ID personal details with remove class method and under this we have write active and in class so this code will remove this both class from this tag after this we have write dollar with idealist personal details with add class method and under this we have write inactive tab one class this code will add this class to this tag below this we have write dollar with list login details with remove class and under this we have write inactive to have one class this code will remove this class from this tag after this we have write dollar with list login details with edie class method and under this we have write active tab one and active class this method will at this both class into this tag below this we have right dollar with idealist login details with attribute method and under this we have right her f and login details this will add her f attribute into this tag now we have right dollar with list login details with attribute method with two argument like data toggle and tag this code will add data toggle attribute into this tag lastly we have right dollar with division tag ID login details with edie class method and under this we have right active and in class this code will add this both class into this tag after this in personal detail step we want to go contact details tab so we will click on next button for this we have right dollar with button ID button personal details with click event under this we have defined two variable like error first name and error last name is equal to blank value now we have write if statement and under condition we have write trim function and under this we have write dollar with textbox ID first name with value method dot length is equal to 0 this condition will check if first name textbox has some value or not if first name textbox has blank value then it will execute if block of code under this we have write error first name variable is equal to first name is required below this we have write dollar with span tag ID error first name with text method and under this we have write error first name variable after this we have write dollar with textbox ID first name with at class method and under this we have right has error class but suppose first name text-box has value then it will execute else block of code and under this we have write error first name variable is equal to blank value below this we have write dollar with span tag ID error first name with text method and under this we have write error first name variable for remove has error class we have right dollar with text box ID first name with remove class method and under this we have right has error class for validate last name textbox so we have right if statement and under condition we have right trim function and under this we have write dollar with textbox ID last name with value method dot length is equal to zero this condition will check if last name textbox has some value or not if last name textbox has blank value then it will execute if block of code under this we have write error last name variable as equal to last name is required below this we have write dollar with span tag ID error last name with text method and under this we have write error last name variable after this we have write dollar with textbox ID last name with add class method and under this we have write as error class but suppose last name textbox has value then it will execute else block of code and under this we have write error last name variable is equal to blank value below this we have write dollar with span tag ID error last name with text method and under this we have write error last name variable for remove has error class we have write dollar with textbox ID last name with remove class method and under this we have write has error class now we have write if statement and under condition we have write error first name variable is not equal to blank or error last name variable value is not equal to blank this condition will check if both variable or any one variable value is not equal to blank then it will execute if block of code and under this we have write return false statement but suppose both variable value is blank then it will execute else block of code and under this block we have write dollar with ID list personal details with remove class method with active and active to have one class below this we have write dollar with ID list personal details with remove attribute method and under this we have writer F data toggle this code will add her F attribute after this we have write dollar with division tag ID personal details with remove class method and under this we have write active class this code will add active class now we have write dollar with list personal details with IDI class and under this we have write inactive to have one class this will add this class to this tag after this we have write dollar with ID list contact details with remove class method and under this we have write inactive to have one class this code will remove this class below this we have write dollar with ID list contact details with add class method and under this we have write active to have one an active class this code will add this both class into this tag after this we have write dollar with ID list contact details with attribute method and under this we have write ref and contact details this code will add her F attribute to this tag same way we have again right dollar with idealist contact details with attribute method and under this we have right data toggle and tab this will add data toggle attribute to this tag lastly we have right dollar with division tag ID contact details with add class method and under this we have right active and in class this code will add both class to this tag friends first we have refresh page and now enter email and password details and click on Next button after click on Next button we have go to next step like personal details here we can see first name last name and gender details with previous and next button so when we have click on previous button then we can go to login details step and after click on next button then we can go to again personal detail so here we have click on next button so we have directly click on next button then we can see validation error on webpage so we have enter first name last name and select gender details and click on next button after click on next button then we can see contact details step with previous and register button so for going to personal details from contact details step so here we have write dollar with button ID previous button contact details with click event under this we have write dollar with idealist contact details with removeclass method under this we have write active and active tab one class this code will remove both class after this we have write dollar with idealist contact details with remove attribute method and under this we have write ref and data toggle this code will remove this both attribute below this we have write dollar with division tag ID contact details with remove class method this code will remove active and in class this code will remove both class after this we have right dollar with idealist contact details with ad class method and under this we have right inactive tab one class this code will add this class below this we have right dollar with idealist personal details with remove class and under this we have right inactive tab one class this code will remove this class now we have right dollar with idealist personal details with edy class method and under this we have right active tab one and active class this code will remove both class after this we have right dollar with idealist personal details with attribute method and under this we write her f and personal details this code will add her f attribute now we have right dollar with idealist personal details with attribute method and under this we have right data toggle and tab this code will add this data toggle attribute lastly we have right dollar with division tag ID personal details with edy class method and under this we have right active and in class this will add both class now we have right dollar with button ID button contact details with click event so when we have click on register button then this code will execute under this we have defined two variable like error address an error mobile number with blank value after this we have right we have right mobile validation variable is equal to regular expression for validate mobile number now we have write if statement and under condition we have write trim func with dollar with text box ID address with value method dot length is equal to zero this condition will check if address text area has no value then it will execute if block of code and under this block we have write error address variable as equal to address is required after this we have write dollar with span tag ID error address dot text method and under this we have write error address variable below this we have right dollar with textbox ID with AD class method and under this we have right has error class but suppose address textbox has some value then it will execute else block of code and under this block we have write error address variable is equal to blank value after this we have write dollar with span tag ID error address with text method and under this we have write error address variable below this we have write dollar with textbox ID address with remove class method and under this we have write has error class after this for validate mobile number so we have write if statement and under condition we have write dollar with textbox ID mobile number with value method dot length is equal to zero this condition will check if mobile number text box has no value then it will execute if block of code and under this we have write error mobile number variable is equal to mobile number is required below this we have write dollar with span tag ID error mobile number dot text method and under this we have write error mobile number variable after this we have write dollar with textbox ID mobile number dot add class method and under this we have write as error class but suppose mobile number textbox has some value then it will execute else block of code and under this block we want to validate mobile number in proper format or not so we have write if statement and under condition we have write not operator with mobile validation variable dot test method and under this we have write mobile dot value method this condition will if mobile number is not in proper format then it will execute if block of code and under this we have write error number variable is equal to invalid mobile number below this we have write dollar with span tag ID error mobile number dot text method and under this we have write error mobile number variable after this we have write dollar with textbox ID mobile number with edy class method and under this we have write as error class but suppose mobile number in proper format then it will execute else block of code and under this we have write error mobile no variable is equal to blank value below this we have write dollar with span tag ID error mobile number with text method and under this we have write error mobile number variable after this we have write dollar with textbox ID mobile number with remove class and under this we have write as error class now we have write if statement and under condition we have write error address variable value is not equal to blank or error mobile number variable value is not equal to blank this condition will check if both or one of the variable value is not blank then it will execute if block of code and under this block we have write return false statement but suppose both variable value is equal to blank then it will execute else block of code and under this block we have write form ID register form with submit method this method will submit form data to server so friends here we can see login details step so here we have enter login details and like on Next button then after we have go to personal details step and here we have entered personal details and below this we can see previous and next button so when we have click on previous button then we can go to login details step but we have click on next button then we have go to contact details step and here also we can see previous and register button so when we have click on previous button then we can go to personal details step and when we have click on register button then form will be submitted and we can do register on site here suppose we want to go to next or previous step then we can go by click on next and previous button now we have moved to write PHP code so here we have defined dollar message variable is equal to blank value below this we have write dollar connect variable is equal to new class with my SQL host is equal to local host database name is equal to testing username set to root and password set to blank after this we have right if statement and under condition we have right ESET function with dollar post email variable if this variable value is set then it will execute if block of code under this block we have right dollar query variable is equal to insert into login table with table column first name last name gender email password address and mobile number and values get from double colon first name last name gender email password address and mobile number now we have right Dollar password hash variable is equal to password hash function with two arguments dollar post password variable and password default this method will convert simple password into hash password and store into dollar password hash variable below this we have right dollar user data variable as equal to array with double colon first name key value get from Dollar post first name variable double colon last name key value get from Dollar post last name variable double colon gender key value get from gender variable double colon email key value get from Dollar post email variable double colon password key value get from Dollar password hash variable same way double colon address key value get from Dollar post address variable and double colon mobile number key value get from dollar post mobile number variable after this we have write dollars statement variable is equal to dollar connect variable with pair statement and under this we have right dollar query variable this statement make query for execution now we have write if statement and under condition we have write dollars statement variable with execute method and under this we have write dollar user data variable if query successfully run and data properly inserted into table then it will execute if block of code and under this block we have write dollar message variable as equal to registration completed successfully lastly we want to display success message on webpage so here we have write echo statement with dollar message variable now we have check output in browser here friends we can see multi step registration form so first we have enter login details and after this we have click on Next button now we can see personal details step so here we have entered personal details fields data and here we can see previous and next button when we have click on previous button then we can go to login details tab but we have click on next button then we can see contact details step and here we have enter contact details now we can see previous and register button so when we have click on previous button we can see personal details tab but we have click on register button after click on register' button form has been submitted and we can see registration successfully completed message on web page so this way we can make multi-step registration form in which we have divided form filling in different step and here validation also divided in two step so user can easily filled their details properly and we can easily manage form validation on different step so from this video tutorial you can learn how to create a form with multiple steps by using jQuery bootstrap with PHP script if you have any query regarding this video tutorial part please comment your query in comment box and if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 67,966

Keywords: multi step form, multi step form php, multi step form jquery, multi step registration form, multi step registration form php, multi step registration form php pdo jquery, responsive multi step form, multi step form bootstrap, multi step form using jquery, multi step form with php jquery, multistep registration form in php mysql jquery, bootstrap multi-step registration form, next previous navigation, form with validation, next and previous buttons, form filling step by step

Id: k5NMI_DjkGQ

Length: 46min 50sec (2810 seconds)

Published: Sat Apr 14 2018