16.3 Forms

1. Navigate to your index.mjs file.

2. Create a const called form that stores the element with the id of rsvp-form so we can work with it in JavaScript.

const form = document.getElementById("rsvp-form");

3. In that JavaScript file, add an event listener to listen for the submit event on the form. This allows you to define what happens when the user clicks the submit button.

const form = document.getElementById('rsvp-form');
form.addEventListener('submit', function(event) {
	console.log("Form submitted!");
});

4. Prevent default behavior! You’ll notice that browsers have some default behaviors like refreshing the page when the user clicks submit. You may want to define different actions and this is why we use the event.preventDefault() method. This way you can handle the form data yourself using JavaScript!

const form = document.getElementById('rsvp-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    console.log("Form submitted!");
});

5. Collect form data using the value property. Store the user input for each field in its own variable. This allows you to work with the user’s input programmatically.

const form = document.getElementById('rsvp-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('full-name').value;
    const email = document.getElementById('email').value;
    const attending = document.getElementById('attending').value;
    const guests = document.getElementById('guests').value;
    console.log("Form submitted!");
});

6. Do something with the data! For now, we’ll log it, so that we can see if it was collected correctly.

const form = document.getElementById('rsvp-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    const name = document.getElementById('full-name').value;
    const email = document.getElementById('email').value;
    const attending = document.getElementById('attending').value;
    const guests = document.getElementById('guests').value;
    console.log(name, email, attending, guests);
});

• The required attribute ensures that the user types something in the input, but it doesn’t check for specific input.

• The type attribute assigned to “email” requires that the user includes the “@” symbol and some text before and after it. This is default behavior associated with the “email” type.

• We added the novalidate attribute on the form. This tells the browser to step aside so our custom JavaScript validation can take full control. You won't see the default required or type="email" checks in action because of this — and that's intentional!

• We'll also add the trim() method to the end of each variable storing the input. This ensures that trailing whitespaces are not included in the value.

1. Declare an isValid variable and assign it to true in the JavaScript file. Then write a conditional statement inside our event listener to check that the user has entered a value for each of the first three inputs:

form.addEventListener("submit", function(event) {
  event.preventDefault();
  let isValid = true; // resets for each submission
  // validation checks go here...
});

2. But that allows the user to type anything for the email address! We could write a simple check that looks for only the @ symbol using includes(), but we know that a valid email should include at least one character before the @ symbol, followed by a domain name, the . character, and finally the top-level domain. To check for a complex pattern like this, it’s best to use regex!
Regex (short for Regular Expression) is like a magic formula for matching patterns in text. Think of it as a way to tell the computer exactly what kind of words, letters, or numbers you’re looking for—like spotting a valid email address or finding every word that starts with "A." It’s super handy when working with text! When you first see regex, it looks a little confusing with all the symbols.

const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
if (!emailPattern.test(email)) {
  alert("Please enter a valid email address.");
  isValid = false;
}

🤖
Using Regex
Ask ChatGPT to explain this regex pattern using what you already know about prompt engineering. Be prepared to share what you learn with the group!
You don’t need to know how to write regex patterns. You can use an AI tool like ChatGPT to help with that, but you’ll need to be extremely specific about what pattern you’re trying to match!

3. Finally, if all of the fields are valid, we’ll alert the user that we received their message, log the values, and clear the form fields!

if (isValid) {
	alert("Thank you for your RSVP!");
  console.log(name, email, attending);
  form.reset();
}

4. Test your form with different values to ensure that all of the form validation checks work as expected!