Skip to content

feat: create program for retrieve data from form html #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swaaz merged 1 commit into from
Oct 19, 2021
Merged

feat: create program for retrieve data from form html #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions Javascript/program-16/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Data</title>
</head>
<body>
<form id="form">
<div class="input-group">
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name">
</div>
<div class="input-group">
<label for="user_email">Email</label>
<input type="email" name="user_email" id="user_email">
</div>
<div class="input-group">
<label for="user_password">Password</label>
<input type="password" name="user_password" id="user_password">
<button type="button" id="toggle_password">toggle password</button>
</div>

<button type="submit">Save</button>
</form>

<!-- link to javascript file -->
<script src="./index.js"></script>
</body>
</html>
55 changes: 55 additions & 0 deletions Javascript/program-16/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
document.addEventListener('DOMContentLoaded', () => {
// get form element
const formElement = document.querySelector('#form');

// add event for submit form
formElement.addEventListener('submit', (e) => {
e.preventDefault();

// email regex for check email
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

// make form data
const formData = new FormData(formElement);

// get data
const name = formData.get('user_name');
const email = formData.get('user_email');
const password = formData.get('user_password');

if (!name) {
alert('Name field is empty. Please fill it');
} else if (!email) {
alert('Email field is empty. Please fill it');
} else if (!emailRegex.test(email)) {
alert('Email is not valid');
} else if (!password) {
alert('Password field is empty. Please fill it');
} else if (password.length < 8) {
alert('Password minimal 8 character');
} else {
alert('Success');
alert(`Welcome ${name}`);

// clear form
formElement.reset();
}

});

togglePassword();
});

const togglePassword = () => {
// toggle password
const passwordInput = document.querySelector('#user_password');
const passwordToggle = document.querySelector('#toggle_password');

passwordToggle.addEventListener('click', () => {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
} else {
passwordInput.type = 'password';
}
});
}
3 changes: 3 additions & 0 deletions Javascript/program-16/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Program 16

Retrieve data from HTML form and validate it