JavaScript Form Validation For Beginners

[@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

[@OgheneRuemu-w4j]

@@WebTechKnowledge thanks

[@MRJK-hd8mi]

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

[@سالمعيسى-ك1و]

بارك الله فيك

[@RVB938]

Superb Explanation bro❤

[@mohammadmeraj40]

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

[@MichaelOchieng-ju8zn]

This very helpful,, thank you very much sir

[@The_world360]

would you tell me how did write at the same time different places by using curser

[@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.

[@Gerinse]

Do input type tel form validation.

[@akibknowsit8030]

This errors can be skipped easily. Please show the php part, how database accepts the form data with all these conditions.

[@Minipro12345]

Make addtocart local base in JavaScript