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!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 60