Create a form with basic validation, such as checking forempty fields and valid email format.

Hey, I am Ajink, and today in this blog, we’re going to build a form with basic validation using HTML, CSS, and JavaScript. Adding validation to your forms is crucial to ensure that users enter the correct information.

HTML Code: create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Form with Basic Validation</title>
</head>
<body>
  <div class="form-container">
    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <button type="button" onclick="validateForm()">Submit</button>
    </form>
  </div>
  <script defer src="script.js"></script>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a form containing input fields for the name and email. The required attribute is used for basic empty field validation.

CSS Code: create a style.css

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 8px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
}

button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

CSS Code Explanation:

  • The CSS provides styling for the form, including spacing, input field styles, and button styles.

JavaScript Code: create script.js

function validateForm() {
  const nameInput = document.getElementById('name');
  const emailInput = document.getElementById('email');

  if (nameInput.value.trim() === '') {
    alert('Name cannot be empty');
    return;
  }

  if (!isValidEmail(emailInput.value)) {
    alert('Please enter a valid email address');
    return;
  }

  // Form is valid, you can submit the data or perform further actions
  alert('Form submitted successfully!');
}

function isValidEmail(email) {
  // Basic email validation using regex
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

JavaScript Code Explanation:

  • The JavaScript code provides the form validation logic.
  • The validateForm function is called when the submit button is clicked.
  • It checks for empty fields and validates the email format using a regular expression.

Conclusion:

In this blog, we successfully built a form with basic validation using HTML, CSS, and JavaScript. You can expand on this example by adding more complex validation or integrating with server-side validation. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Related Articles

Responses

Your email address will not be published. Required fields are marked *