Hello friends, I hope you all are fine and doing something good. You people must have seen the field with confirmed password on some website at some point or the other, although it is very good for the users and it should be, so today I have made a video on this, the title of the video is Check or matching confirm password field using HTML, CSS and Javascript so I hope you guys you like this video and article.
How to check or match confirm password Field features are mostly used when you reset your password or set a new password and when you fill out a website registration form. So today I will tell you how to create this feature.
You can see below that I have attached the embedded file of jsfiddle, in which you can see the code of HTML, CSS, and Javascript. And you can copy this code to your file.
You might like this article or video
Random Password Generator Small Web App In HTML, CSS & JQUERY
Toggle Password Visibility Using Javascript | Login Form Show Hide Password Field Text
File Upload Progress bar Animation in Html, Css & Jquery | How to Make Animate Progress Bar
Below I have explained three files index.html, style.css, and script.js which code is for what purpose. If you have not come, then it does not matter, I have told you through the video below that you can easily integrate this code into any website.
If you do not know the structure of HTML, then I have added the structure of default HTML, you can copy it and paste it into your index.html file, and then after that, I have given the complete code step by step, you can copy it and see Can.
I have taken a form tag in the index.html file and inside this form, I have taken the input password field twice, the second field so that its value can match with the first field. in this I have taken a form I have taken 3 input fields inside it one is the text field there are two password fields one is for password and the other is confirm password field i.e to match the password and then the final input In button field and its code is given below.
In the style.css file, I have written all the styles of the form inside it. I have written this style so that we can make the form look nice and attractive, except that there is no other use of style. In this, I have written the style of the entire form, in which I have given the box-shadow to the form tag, given the border-radius, after that, I have given the background color to the input text field, have given the border-radius i.e. have been rounded, after that, the button has been given a linear gradient color. He has given the box-shadow and the necessary style is given. You will find its code below.
In the script.js file, In this, I have taken the function of an onclick and targeted it with the submit button. Inside this, a variable is taken and the value of the confirmed password is stored. After that if-else condition is given in which both the password fields have been matched, if the value of both the fields is matched then the message of success will show, and if the value of any one field is wrong then the message of fail will be shown. And in this js file, I have taken a script name tag before the end of the body tag in the index.html file, written inside it, if you want, you can also create a separate file for it. Its code is given below.
The functionality of this is pure JavaScript, there is no jquery or dependency, so you can easily integrate it and change it according to your own.
So I hope you guys have liked this article and video of mine and if you have any questions or requests then you can tell through comments below and I will try to answer them. If you want to see more such videos then subscribe to my LearnDesign youtube channel and also follow learndesigntutorial.com website.
