This is an intermediate-level project where you will create a simple web form with validation using HTML, CSS, and JavaScript. The form should include fields like name, email, and password, and it should validate the input before submission. This project will help you understand form handling, input validation, and providing feedback to users.
Your project should have the following structure:
simple-form-validation/
└── yourname/
├── index.html
├── style.css
└── script.js
- index.html: The HTML file that includes the structure of the form.
- style.css: The CSS file that contains the styling for the form.
- script.js: The JavaScript file that contains the validation logic.
-
Fork the Repository: Start by forking this repository to your GitHub account.
-
Clone the Repository: Clone the forked repository to your local machine using:
git clone https://github.com/your-username/javascript-mastery-course.git
-
Create a New Branch: Create a new branch for your project using:
git checkout -b simple-form-validation-yourname
-
Create Your Project Folder: Inside the
projectsdirectory, create a new folder with your name:javascript-mastery-course/ ├── simple-form-validation/ │ └── yourname/ │ ├── index.html │ ├── style.css │ └── script.js -
Add Your Files: Add your
index.html,style.css, andscript.jsfiles to theyournamefolder within thesimple-form-validationproject. -
Commit and Push: Commit your changes and push them to your forked repository:
git add . git commit -m "Add Simple Form Validation project by yourname" git push origin simple-form-validation-yourname
-
Create a Pull Request: Go to the original repository on GitHub and create a pull request from your branch.
- The form should have fields for name, email, and password.
- The form should include validation for the following:
- Name: Should not be empty and should contain only letters.
- Email: Should be a valid email format.
- Password: Should be at least 6 characters long.
- The form should display error messages for invalid input.
- The form should not submit if there are validation errors.
- The form should be styled using CSS.
- Use regular expressions for email and name validation.
- Use JavaScript to handle the validation logic and display error messages.
- Ensure your CSS file is linked correctly in the HTML file.
Here’s a simple example of what your index.html, style.css, and script.js files should look like:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Validation</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="form-container">
<form id="simpleForm">
<h2>Register</h2>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<span class="error" id="nameError"></span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" name="email">
<span class="error" id="emailError"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<span class="error" id="passwordError"></span>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>style.css:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.form-container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.error {
color: red;
font-size: 0.8em;
display: none;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}script.js:
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('simpleForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
form.addEventListener('submit', (e) => {
let valid = true;
// Name validation
if (nameInput.value.trim() === '' || !/^[a-zA-Z]+$/.test(nameInput.value)) {
nameError.textContent = 'Please enter a valid name (letters only).';
nameError.style.display = 'block';
valid = false;
} else {
nameError.style.display = 'none';
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailError.textContent = 'Please enter a valid email address.';
emailError.style.display = 'block';
valid = false;
} else {
emailError.style.display = 'none';
}
// Password validation
if (passwordInput.value.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters long.';
passwordError.style.display = 'block';
valid = false;
} else {
passwordError.style.display = 'none';
}
if (!valid) {
e.preventDefault();
}
});
});When you open index.html in a web browser, it should display a form with validation checks for the name, email, and password fields.
Your submission should follow this structure:
javascript-mastery-course/
├── simple-form-validation/
│ └── yourname/
│ ├── index.html
│ ├── style.css
│ └── script.js
- Ensure your project follows the file structure guidelines.
- Your submission will be reviewed, and feedback will be provided if necessary.
- Have fun coding and enhancing your JavaScript skills!
Happy coding! 🚀