Learn JavaScript Form Validation – Build a JS Project for Beginners ✨

Now let‘s add a touch of CSS to make the form more visually appealing:

form {
  max-width: 400px;
  margin: 0 auto;
  padding: 16px;
  background: #f4f4f4;
}

label {
  display: block;
  margin: 16px 0 6px;
}

input, button {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
}

small {
  color: #cc0000;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);  
}

input[type="email"]:invalid {
  border-color: #cc0000;
  box-shadow: none;  
}

input[type="email"]:valid {
  border-color: #00cc00;
}

Key points to note:

• The form is centered on the page with a max width
• Labels are displayed as blocks for better touch targets
• Inputs and the button span the full form width
• The small tag for displaying errors uses a red color
• We have some focus styles enhancing the active input
• Valid and invalid email inputs receive green and red borders respectively

Accessing Form Fields with JavaScript

Now that our form is set up, let‘s see how we can access it with JavaScript. We‘ll use the getElementById method to grab our form and input elements:

const form = document.getElementById(‘signup-form‘); 
const usernameInput = document.getElementById(‘username‘);
const emailInput = document.getElementById(‘email‘);
const passwordInput = document.getElementById(‘password‘);

We can also access an element‘s next sibling with nextElementSibling, which will come in handy to display our error messages below each input:

const usernameError = usernameInput.nextElementSibling;
const emailError = emailInput.nextElementSibling;
const passwordError = passwordInput.nextElementSibling;

Validating Inputs with Conditionals and Regular Expressions

Time for the fun part – actual form validation! Let‘s start by validating the username field. We want it to contain only letters and be between 3 and 15 characters long. Here‘s how we can achieve that:

function validateUsername() {
  const usernameValue = usernameInput.value.trim(); 
  const regEx = /^[a-zA-Z]{3,15}$/;

  if (!regEx.test(usernameValue)) {
    usernameError.textContent = ‘Username must be 3-15 characters and only contain letters‘;
    usernameInput.style.borderColor = ‘#cc0000‘;
    return false;  
  } else {
    usernameError.textContent = ‘‘;
    usernameInput.style.borderColor = ‘#00cc00‘;
    return true;
  }
}

Whoa, let‘s break that down step-by-step!

1. We retrieve the current value of the username input and remove any trailing whitespace using trim().
2. We define a regular expression that matches 3-15 characters containing only letters. The ^ and $ ensure that the entire value is matched.
3. We use the regex test() method to check if the username matches the pattern.
4. If there‘s no match, we display a descriptive error message in the <small> tag, change the input border to red, and return false to indicate an invalid field.
5. If there is a match, we clear the error message, change the border color to green, and return true for a valid username.

See how we combined conditionals and regex to perform the validation? You can follow a similar approach for other text fields.

For the email field, we can leverage the built-in HTML5 email validation by simply adding the type="email" attribute to the input. However, you can also validate it with a robust regex pattern in JS:

function validateEmail() {
  const emailValue = emailInput.value.trim(); 
  const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!regEx.test(emailValue)) {
    emailError.textContent = ‘Please enter a valid email address‘;
    emailInput.style.borderColor = ‘#cc0000‘;
    return false;  
  } else {
    emailError.textContent = ‘‘;
    emailInput.style.borderColor = ‘#00cc00‘;
    return true;
  }  
}

This checks that the email contains some characters before and after a single @ sign and period.

For passwords, you can enforce criteria like minimum length, mandating numbers/symbols, etc. Here‘s a simple example:

function validatePassword() {
  const passwordValue = passwordInput.value.trim();

  if (passwordValue.length < 6) {
    passwordError.textContent = ‘Password must be at least 6 characters long‘;
    passwordInput.style.borderColor = ‘#cc0000‘;  
    return false;
  } else {
    passwordError.textContent = ‘‘;
    passwordInput.style.borderColor = ‘#00cc00‘;
    return true;    
  }
}

Handling Form Submission and Real-Time Validation

Great, we have validators for each field! Now let‘s bring it all together. We‘ll validate the form when the user submits it and prevent submission if any fields are invalid.

form.addEventListener(‘submit‘, (event) => {
  event.preventDefault();

  const isUsernameValid = validateUsername();
  const isEmailValid = validateEmail();  
  const isPasswordValid = validatePassword();

  if (isUsernameValid && isEmailValid && isPasswordValid) {
    // Submit the form
    alert(‘Hooray! Account created!‘);
  }
});

By listening to the form‘s submit event, we can run our validation functions. The preventDefault() method stops the form from being submitted if there are any invalid fields. Only when all fields are valid do we submit the form.

We can take it a step further and validate the fields as the user types for real-time feedback:

usernameInput.addEventListener(‘input‘, validateUsername);
emailInput.addEventListener(‘input‘, validateEmail);
passwordInput.addEventListener(‘input‘, validatePassword);

Now the user gets instant validation results while filling out the form. This can greatly enhance the UX and reduce user frustration. Remember, helping users fill out the form is the primary goal of form validation!

Testing and Debugging Your Form Validation

Before deploying your shiny new validated form, be sure to test it thoroughly! Here are some tips:

• Try submitting an empty form
• Enter invalid data in each field (too short, too long, wrong format)
• Use valid data and ensure the form submits
• Test in different browsers and devices

If you‘re not getting the expected behavior, use the browser‘s developer tools to debug. Set breakpoints in your validation functions, inspect the form element properties, and watch for errors in the console.

Taking Your Form Validation to the Next Level

Congratulations, you now have a solid foundation in JavaScript form validation! But the learning doesn‘t stop here. Consider these ideas to level up your form:

• Add more specific validation (e.g. checking for unique usernames against a database)
• Implement a password strength meter
• Allow users to show/hide the entered password
• Validate the form before enabling the submit button
• Submit the form with AJAX for a seamless experience

The core JavaScript concepts you learned – accessing DOM elements, handling events, using conditionals and regex – will serve you well in all these cases and beyond!

Conclusion

Form validation is a crucial aspect of web development, and JavaScript provides powerful tools to implement it on the frontend. By using HTML input attributes, CSS styles, and JavaScript functions, you can guide users through filling out your forms and catch invalid data before submission.

The key concepts to master are accessing form fields, defining validation rules with conditionals and regex, and providing real-time feedback to enhance the user experience. With a solid grasp of these fundamentals, you can build robust and user-friendly validated forms.

I hope this tutorial helped you understand the essentials of JavaScript form validation and inspired you to create some impressive forms yourself! Feel free to reach out if you have any questions or cool projects to share. Happy coding! 🚀