JavaScript Form Validation For Beginners

Показать описание

#javascriptformvalidation#formvalidationinjavascript🔥

🔥 Javascript Tutorial for Beginners :

• #1 Javascript Tut...

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:

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

Рекомендации по теме

Комментарии

Here is the source Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Form Validator</title>

: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%;
}
</style>

</head>
<body>
<div class="container">
<form id="form" class="form">
<h2>Register</h2>

<div class="form-control">

for="username">Name</label>
type="text" id="name" placeholder="Enter username" />
style="color:red" id="name_error"></span>

</div>

<div class="form-control">

for="email">Email</label>
type="text" id="email" placeholder="Enter email" />
style="color:red" id="email_error"></span>

</div>

<div class="form-control">

type="password" id="password" placeholder="Enter password" />
style="color:red" id="pass_error"></span>

</div>

<button
</form>
</div>

<script type="text/javascript">
const name =
const email =
const password =
const form =

const name_error =

const email_error =

const 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 = "";
}

{
e.preventDefault();
email_error.innerHTML = "Valid Email is required";

}

else
{
email_error.innerHTML = "";
}

if(password.value.length <= 5)

{
e.preventDefault();
pass_error.innerHTML = "Password must be more than 6 characters";
}

else
{
pass_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";
}

})
</script>
</body>
</html>

WebTechKnowledge