Add files via upload

SpantaAlizadeh10 · Dec 23, 2024 · 9633979 · 9633979
1 parent eb043a6
commit 9633979
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 0 deletions.
diff --git a/sign up form/index.html b/sign up form/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Form Validation</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="form-container">
+    <h1>Sign Up</h1>
+    <form id="signupForm">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" placeholder="Enter your username">
+        <small class="error-message"></small>
+      </div>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" placeholder="Enter your email">
+        <small class="error-message"></small>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" placeholder="Enter your password">
+        <small class="error-message"></small>
+      </div>
+      <button type="submit">Sign Up</button>
+    </form>
+    <div id="successMessage" class="success-message"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/sign up form/script.js b/sign up form/script.js
@@ -0,0 +1,62 @@
+const form = document.getElementById('signupForm');
+const successMessage = document.getElementById('successMessage');
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault(); // جلوگیری از ارسال فرم
+  const username = document.getElementById('username');
+  const email = document.getElementById('email');
+  const password = document.getElementById('password');
+
+  let isValid = true;
+
+  // اعتبارسنجی نام کاربری
+  if (username.value.trim() === '') {
+    showError(username, 'Username is required');
+    isValid = false;
+  } else {
+    hideError(username);
+  }
+
+  // اعتبارسنجی ایمیل
+  if (!isValidEmail(email.value)) {
+    showError(email, 'Enter a valid email address');
+    isValid = false;
+  } else {
+    hideError(email);
+  }
+
+  // اعتبارسنجی رمز عبور
+  if (password.value.length < 6) {
+    showError(password, 'Password must be at least 6 characters');
+    isValid = false;
+  } else {
+    hideError(password);
+  }
+
+  // اگر تمام فیلدها معتبر بود
+  if (isValid) {
+    successMessage.textContent = 'Sign up successful!';
+    form.reset();
+  }
+});
+
+function showError(input, message) {
+  const parent = input.parentElement;
+  const errorMessage = parent.querySelector('.error-message');
+  errorMessage.textContent = message;
+  errorMessage.style.display = 'block';
+  input.style.borderColor = '#ff4d4d';
+}
+
+function hideError(input) {
+  const parent = input.parentElement;
+  const errorMessage = parent.querySelector('.error-message');
+  errorMessage.textContent = '';
+  errorMessage.style.display = 'none';
+  input.style.borderColor = '#ccc';
+}
+
+function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
diff --git a/sign up form/styles.css b/sign up form/styles.css
@@ -0,0 +1,67 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f3f4f6;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.form-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 300px;
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.error-message {
+  color: #ff4d4d;
+  font-size: 0.9em;
+  display: none;
+}
+
+.success-message {
+  margin-top: 20px;
+  color: #28a745;
+  font-size: 1.2em;
+  text-align: center;
+}