Scribd
Upload
9 views

B - FORM Validation Using Regular Express in JS

The document contains code for a form validation project. It includes HTML, CSS, and JavaScript code to validate form fields like name, phone number, email, and message on keyup. The code adds error messages and success checkmarks for each field on valid or invalid input.

Uploaded by

Par Veen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

B - FORM Validation Using Regular Express in JS

The document contains code for a form validation project. It includes HTML, CSS, and JavaScript code to validate form fields like name, phone number, email, and message on keyup. The code adds error messages and success checkmarks for each field on valid or invalid input.

Uploaded by

Par Veen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Bangladesh University of Professionals

Department of Information and Communication Technology

ICE-3209

Web Technology

Assignment
Submitted By: Nusrot Jahan (2154901108)

Class Work:

Codes:

index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation </title>
<!-- comment a line shortcut "Crt+/"-->
<!-- add stylesheet link here-->
<link rel="stylesheet" href="style.css">

<!-- add srouce file for logo from fontawesome site-->


<script src="https://kit.fontawesome.com/32f79ba02b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form>
<!-- <i class="fas fa-paper-plane"></i>-->
<!-- <i class="fa-solid fa-hand-holding-medical"></i> -->
<!-- <i class="fa-brands fa-google"></i>-->
<i class="fa-solid fa-hands-holding-child"></i>
<!--add name field-->
<div class="input-group">
<label>Full Name</label>
<input type="text" placeholder="Enter your name" id="contact-name" onkeyup="validateName()">
<span id="name-error"></span>
</div>
<!--add Phone no field-->
<div class="input-group">
<label>Phone No.</label>
<input type="tel" placeholder="123 456 7890" id="phone" onkeyup="chkphoneno()">
<span id="phone-error"></span>
</div>
<!--add Email id field-->
<div class="input-group">
<label>Email Id</label>
<input type="email" placeholder="Enter Email">
<span id="email-error"></span>
</div>
<!--add message field -->
<div class="input-group">
<label>Your Message</label>
<textarea rows="5" placeholder="Enter your message"></textarea>
<span id="message-error"></span>
</div>
<!--add submit button-->
<button>Submit</button>
<span id="submit-error"></span>

</form>

</div>
<script src="regEx.js">
</script>
</body>
</html>

Style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: #141a34;
display: flex;
align-items: center;
justify-content: center;
}

.useful-links{
position: absolute;
top: 5%;
right: 5%;

}
.useful-links a{
display: block;
color: #fff;
text-decoration: none;
}

.container form{
width: 90%;
max-width: 500px;
padding: 50px 30px 20px;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
position: relative;
}
/*
.fa-paper-plane{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
font-size: 26px;
padding: 20px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
*/
.fa-hands-holding-child{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
font-size: 26px;
padding: 20px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.input-group{
width: 100%;
display: flex;
align-items: center;
margin: 10px 0;
position: relative;
}
.input-group label{
flex-basis: 28%;
}
.input-group input, .input-group textarea{
flex-basis: 68%;
background: transparent;
border: 0;
outline: 0;
padding: 10px 0;
border-bottom: 1px solid #999;
color: #333;
font-size: 16px;
}
::placeholder{
font-size: 14px;
}

form button{
background: #141a34;
color: #fff;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 10px 40px;
outline: 0;
cursor: pointer;
display: block;
margin: 30px auto 10px;
}
.input-group span{
position: absolute;
bottom: 12 px;
right: 17px;
font-size: 14 px;
color: red;
}
#submit-error{
color: red;
}
.input-group span i{
color: seagreen;
}

regEX.js:
var nameError =document.getElementById('name-error');
console.log(nameError);
function validateName(){
var name=document.getElementById('contact-name').value;
if(name.length==0){
nameError.innerHTML = 'name is required';
return false;
}
if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)){
nameError.innerHTML='Write full name';
return false;
}
nameError.innerHTML = '<i class="fa-solid fa-check" style="color: #74C0FC;"></i>';
return true;

var phoneError = document.getElementById('phone-error');


function chkphoneno(){
var phone = document.getElementById('phone').value;
if(phone.length == 0){
phoneError.innerHTML = 'Phone no is required';
return false;
}
if(!phone.match(/^[+]?[1-9][0-9]*$/)){
phoneError.innerHTML = 'Invalid phone number';
return false;
}
if(phone.length != 11){
phoneError.innerHTML = "Phone no must be 11 digits";
return false;
}

phoneError.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';


return true;
}
Output:
Task:

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation </title>
<!-- comment a line shortcut "Crt+/"-->
<!-- add stylesheet link here-->
<link rel="stylesheet" href="style.css">

<!-- add srouce file for logo from fontawesome site-->


<script src="https://kit.fontawesome.com/32f79ba02b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form>
<!-- <i class="fas fa-paper-plane"></i>-->
<!-- <i class="fa-solid fa-hand-holding-medical"></i> -->
<!-- <i class="fa-brands fa-google"></i>-->
<i class="fa-solid fa-hands-holding-child"></i>
<!--add name field-->
<div class="input-group">
<label>Full Name</label>
<input type="text" placeholder="Enter your name" id="contact-name" onkeyup="validateName()">
<span id="name-error"></span>
</div>
<!--add Phone no field-->
<div class="input-group">
<label>Phone No.</label>
<input type="tel" placeholder="123 456 7890" id="phone" onkeyup="chkphoneno()">
<span id="phone-error"></span>
</div>
<!--add Email id field-->
<div class="input-group">
<label>Email Id</label>
<input type="email" placeholder="Enter Email" id="email" onkeyup="validateEmail()">
<span id="email-error"></span>
</div>
<!--add message field -->
<div class="input-group">
<label>Your Message</label>
<textarea rows="5" placeholder="Enter your message" id="message"
onkeyup="validateMessage()"></textarea>
<span id="message-error"></span>
</div>
<!--add submit button-->
<button>Submit</button>
<span id="submit-error"></span>

</form>

</div>
<script src="regEx.js">
</script>
</body>
</html>

RegEX.js:

var nameError =document.getElementById('name-error');


console.log(nameError);

function validateName(){
var name=document.getElementById('contact-name').value;
if(name.length==0){
nameError.innerHTML = 'name is required';
return false;
}
if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)){
nameError.innerHTML='Write full name';
return false;
}
nameError.innerHTML = '<i class="fa-solid fa-check" style="color: #74C0FC;"></i>';
return true;

}
var phoneError = document.getElementById('phone-error');

function chkphoneno(){
var phone = document.getElementById('phone').value;

if(phone.length == 0){
phoneError.innerHTML = 'Phone no is required';
return false;
}
if(!phone.match(/^[+]?[1-9][0-9]*$/)){
phoneError.innerHTML = 'Invalid phone number';
return false;
}
if(phone.length != 11){
phoneError.innerHTML = "Phone no must be 11 digits";
return false;
}

phoneError.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';


return true;
}

var emailError = document.getElementById('email-error');


function validateEmail(){
var email = document.getElementById('email').value;
if(email.length == 0){
emailError.innerHTML = 'Email is required';
return false;
}
if(!email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)){
emailError.innerHTML = 'Invalid email address';
return false;
}
emailError.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
return true;
}

var messageError = document.getElementById('message-error');


function validateMessage(){
var message = document.getElementById('message').value;
if(message.length == 0){
messageError.innerHTML = 'Message is required';
return false;
}
messageError.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
return true;
}

Output:

You might also like