Untitled
unknown
plain_text
a year ago
4.7 kB
3
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Form Validation</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } .container { max-width: 500px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-top: 0; color: #333; padding-bottom: 10px; border-bottom: 1px solid #ccc; } label { display: block; margin-bottom: 5px; color: #333; font-weight: bold; } input[type="text"], input[type="email"], input[type="tel"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 15px; color: #333; } .error-message { color: red; font-size: 14px; margin-bottom: 10px; } .success-message { color: green; font-size: 16px; font-weight: bold; margin-top: 10px; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } input[type="submit"]:hover { background-color: #45a049; } </style> <script> function validateForm() { var firstName = document.getElementById('firstName').value; var lastName = document.getElementById('lastName').value; var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; // Regular expressions for validation var nameRegex = /^[A-Za-z]+$/; var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; var phoneRegex = /^\d{10}$/; // Clear previous error messages document.getElementById('firstNameError').textContent = ''; document.getElementById('lastNameError').textContent = ''; document.getElementById('emailError').textContent = ''; document.getElementById('phoneError').textContent = ''; // Validation for first name if (firstName.trim() === '') { document.getElementById('firstNameError').textContent = 'Please enter your first name.'; return false; } else if (!firstName.match(nameRegex)) { document.getElementById('firstNameError').textContent = 'Please enter a valid first name.'; return false; } // Validation for last name if (lastName.trim() === '') { document.getElementById('lastNameError').textContent = 'Please enter your last name.'; return false; } else if (!lastName.match(nameRegex)) { document.getElementById('lastNameError').textContent = 'Please enter a valid last name.'; return false; } // Validation for email if (email.trim() === '') { document.getElementById('emailError').textContent = 'Please enter your email address.'; return false; } else if (!email.match(emailRegex)) { document.getElementById('emailError').textContent = 'Please enter a valid email address.'; return false; } // Validation for phone number if (phone.trim() === '') { document.getElementById('phoneError').textContent = 'Please enter your phone number.'; return false; } else if (!phone.match(phoneRegex)) { document.getElementById('phoneError').textContent = 'Please enter a valid phone number (10 digits).'; return false; } // All fields are valid document.getElementById('successMessage').textContent = 'Form submitted successfully!'; return true; } </script> </head> <body> <div class="container"> <h1>Form Validate</h1> <form onsubmit="return validateForm()"> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName"> <span id="firstNameError" class="error-message"></span><br> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="lastName"> <span id="lastNameError" class="error-message"></span><br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <span id="emailError" class="error-message"></span><br> <label for="phone">Phone:</label> <input type="tel" id="phone" name="phone"> <span id="phoneError" class="error-message"></span><br> <input type="submit" value="Submit"> <div id="successMessage" class="success-message"></div> </form> </div> </body> </html>