How to Create A Registration Form Using jQuery Ajax with Validation - PHP Tutorial | MySQLi

hi welcome to my channel today i am gonna show you how you can create a registration form using ajax with validation and mysqli so this is the form which we will going to create in this video [Music] [Music] [Music] i am going to break down the code into these steps [Music] let's start with the first step creating a basic html5 form create a new folder in your www or htdocs folder and give it a name here i am giving ajax form drag this folder in your source code editor under this folder create an index.php file in this file we will write the html5 code [Music] our form will be under the div tag with class form [Music] banner class contains our background or main image form message class shows the forms error like empty fields etc these codes are for the rows in their respective fields [Music] [Music] you [Music] now let's style this form first link the css file [Music] i have created a folder named css under this folder create a file called style.css now let's start designing with css code i am using roboto font here let's copy the roboto font cdn from google fonts you can use any of these fonts cdn copy this font cdn and paste it into your code just follow me carefully [Music] i am creating a folder called images in which i will keep my main image or background image [Music] [Music] [Music] [Music] do [Music] [Music] [Music] [Music] now we will make the form responsive using media queries [Music] [Music] [Music] [Music] [Music] [Applause] [Music] as you can see we have completely created and designed our form now let's make this form dynamic [Music] this is the jquery syntax give the form an id here i am giving my form [Music] this code means on submitting the form e dot prevent default function prevent our form from submission [Music] as you can see it is not working because we haven't included the jquery cdn let's search for jquery ajax cdn on google copy the jquery cdn and paste it into your code as you can see the code is working [Music] i am using dollar dot ajax jquery ajax method to submit the form this code means for submission we will use post method here after clicking on submit button url goes to signup.php data option contains the forms inputs values data type option this is what you're expecting back from the server here i am giving jason means i want my response from the server in the form of json so basically json is the response format here we will tell the jquery that we will expect the response in json format using data type content type false this is the type of data you're sending cache false it will force requested pages not to be cached by the browser setting cache to false will only work correctly with head and get requests process data fulls jquery simply sends whatever you specify as data without any attempt to modify it by encoding as a query string in our style.css as you can see we have set the display of the form message class to none [Music] so after success function we will set the display of the form message class by jquery to block when the form is being successfully submitted then we will see our response status that is it true or equal to one then the form will get reset [Music] and one success message will be shown using message property to verify this we have to set a response parameter along with success function but if in our response contains some error-like empty fields then an error message will be shown we have to check this with status property now we have to validate our file and send our selected file this code means when the value of the input type file changes then using files property we will store the image whose index is 0 in the variable file files property makes a list of files which we select to upload and the image which has the index 0 would be selected as we have not given the option to upload multiple files so it can only seize that file which has index zero the file property will make a list of only that single image which has zero index this happens only because we have used this code with index zero file type denotes the type of file that whether it is image pdf or rar next we will create an indexed array variable named match array contains the format of image that we will allow to be upload in case we will try to upload an rar file then it will not allow us to upload it because rar does not match with the array match variable it will show an error message and input file value will get empty and if we will upload an image file then it will get preceded this is the code [Music] as you can see i am trying to upload an rar file but it will not allow me to do that because rar file does not match with the match variable next step is to validate the form so create a signup.php file under ajax form folder let's write the php code now we will create an associative array variable named response it contains two key first key is status whose value is zero and another one is message whose value will be form submission failed this message will be shown when there is an error but if we did not display the error message then this error will be displayed status key is used for response status and message key is used for displaying the error or success messages first create two variables dollar empty and dollar error email and set them to false here i am testing that this ajax is working or not i will explain this code later to you the json underscoring code function is used to encode a value to json format here variable response is encoded into json format as you can see our ajax request is successfully submitted and it is redirected to the signup.php now we have to design the error message whose class is form message in style.css file [Music] [Music] as you can see we have designed the error message using isit function of php we will verify that our form's input value is set or not in this form fields are first name last name email password and file a side note here we have to keep this in mind that the name which we are using in the isip function it should be the same name which we have used for input field name attribute the values which are set using the isip function we will store these in the same variable name in other words we have to store the forms input fields value in the variable i am using the same variable name here to make it understand easily next we have to validate that our field is empty or not if it is empty it will show an error here just to show you i am writing that if the first name field is empty then an empty error message occurs otherwise it will show the not empty message [Music] now we will validate our all input fields value another note here use dollar underscore files for file input as it will not take post method as you can see it is showing the form submission failed error because i have not given the error message after the else part for this we have to remove the comment from the else part it shows empty as you can see we haven't given any value it is perfectly working for all the fields after this we have validate our email field using filter underscore var php function this function shows an invalid email error message if it found email invalid and along with this we have to make our dollar error email variable true you have to set the dollar error empty variable to true after the empty error message usage of these two variable is here we will start our upload file code using these two variables if both of these variables are false then we will write the code to upload the file create a variable named upload status and set it to 1. and a variable named upload file and set it to empty we will use this variable later if file input is not empty then we will define our file path dollar file name specifies the name of the file dollar target file path specifies the path of the uploaded file i am creating a folder under the ajax form folder named uploads where i am going to keep my uploaded files here we have to create a variable named upload dir it will contain the value of that folder uploads which we just created in which we are going to keep our uploaded files dollar file type specifies the type of the file but here it will not be used now we will see that if file already exists in the uploads folder then it will not allow us to upload it again and along with it set the upload status variable to zero if the file not exists in the uploads folder then we will check the size of the file if it is larger than the specified size here i am specifying 500 kilobytes a note here convert the 500 kilobytes into bytes [Music] if the files exceeds then this message will be shown and upload status is set to zero first we have to make the variable file type to a comment as we are not using it here if the file is not exceeds to a specific size it will be uploaded to the destination folder which is uploads folder upload file variable is used here if the file does not contain any error then the upload file is equal to the file name and upload status will set to 1 otherwise an error message will be shown and upload status will set to zero [Music] [Music] now we have to insert this data into database if upload status is equal to 1 then data will be inserted into the database if you want to encode the password then create a variable called hash and encode the password using md5 php function we have to make sure that if an email already exists in the database then our data would not be inserted in the database to do this we have to create a check variable before insertion let's connect the form with the database create a file config.php under the ajax form writing the code to connect the database let's create the database ajax form into phpmyadmin go to the sql option and write the create table query now create a table called user under the ajax form database and write down the field names which you have given in the form [Music] if database already contains the email then it will show the error message otherwise data will be inserted into the database [Music] create the query variable and write the insert query in insert query make sure you're using the same fields name as you have used in your database table [Music] if the insert query works correctly without any error then the success message will be shown and response status is set to one [Music] as you can see data is inserted successfully and file is also uploaded to the upload folder now let's insert another data with the same email and same file as you can see it shows the error for the same file and for the same email but after changing the file it will uploading the file in the uploads folder to prevent this we have to cut this code and paste it before insertion query [Music] [Music] me let's try again inserting the data with the same email to check that after having same email in the database it is uploading the file or not now you can see after checking that email already exists it does not uploading the file so this is it for today hope you liked and learned something from this if you do then hit a like and subscribe to my channel for more bye

Channel: WebsiteGeek

Views: 4,541

Keywords: Coding, jQuery Ajax with Validation, website, code, java, jquery, scrpt, script, javascript, registration, form, login, in, signin, sign, signup, up, register, Ajax, tutorial, validation, error, php, wordpress, html, how, to, howto, beginners, responsive, media, queries, coder, Decode, Easy Tutorials, login form design, mysqli, CSS, web design, www, programming, json, response, guide, development, formdata, database

Id: a34seCE-3KY

Length: 31min 0sec (1860 seconds)

Published: Tue Dec 22 2020