JavaScript Form Validation For Beginners

#javascriptformvalidation#formvalidationinjavascript🔥
🔥 Javascript Tutorial for Beginners :
• #1 Javascript Tut...
Buy me a Coffee 🥰 : www.buymeacoff...
Support This Channel :
Join this channel to get access to perks:
/ @webtechknowledge
Your support will be really appreciated.
Thanks For Watching.
I hope This video was helpful. If you have any questions then let me know in the comment section.
Best of luck
#webtechknowledge
You can connect with me with the given links below:
Facebook Link: / yaminshakil07
Instagram Link: / yamin_shakil
Twitter Link: / yaheashakil
javascript form validation,form validation in javascript,form validation using javascript,javascript form validation tutorial,javascript,javascript validation,form validation javascript,registration form validation using javascript,jquery form validation,validation in javascript,check email validation in javascript,js validation,validation in javascript for registration form,js validation for email,email validation in javascript,validate password javascript

[@WebTechKnowledge]

Here is the source Code :





Form Validator
@import url('fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=Rubik:wght@300;400;600;700&display=swap');
:root {
--success-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('./img/bg.jpg');
background-size: cover;
background-position: center top;
font-family: 'Rubik', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
font-weight: 300;
text-align: center;
margin: 0 0 20px;
color: white;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #fff;
display: block;
margin-bottom: 5px;
font-weight: 300;
}
.form-control input {
background: transparent;
border: 0;
border-bottom: 1px solid #f0f0f0;
display: block;
width: 100%;
padding: 10px 0;
font-size: 14px;
color: white;
font-family: 'Roboto', sans-serif;
}
.form-control input#username {
background-color: transparent;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--success-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: crimson;
border: 2px solid crimson;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}




Register

Name





Email





Password





Submit



const name = document.getElementById('name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const form = document.getElementById('form');
const name_error = document.getElementById('name_error');
const email_error = document.getElementById('email_error');
const pass_error = document.getElementById('pass_error');
form.addEventListener('submit',(e)=>
{
var email_check = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(name.value === '' || name.value == null)
{
e.preventDefault();
name_error.innerHTML = "Name is required";
}
else
{
name_error.innerHTML = "";
}
if(!email.value.match(email_check))
{
e.preventDefault();
email_error.innerHTML = "Valid Email is required";
}
else
{
email_error.innerHTML = "";
}
if(password.value.length = 20)
{
e.preventDefault();
pass_error.innerHTML = "Password cannot be more than 20 characters";
}
if(password.value === 'password')
{
e.preventDefault();
pass_error.innerHTML = "Password cannot be password";
}
})

[@surudhikaj4074]

sir can you explain this css part

[@user-ic2xi6qz9w]

بارك الله فيك

[@MichaelOchieng-ju8zn]

This very helpful,, thank you very much sir

[@RVB938]

Superb Explanation bro❤

[@mohammadmeraj40]

Very nice validation form bro.. thanks❤❤👏👏👏

[@MRJK-hd8mi]

today is my exam,THANK U SO MUCH!!!

[@musikrelax4809]

Fet array from controller and then Show cart with JavaScript without refresh...page web please.
Thanks for this video

[@maxwelljames6406]

Please do more project series on Laravel.

[@SmashCoder12]

Make addtocart local base in JavaScript