使用 addEventListener 的 Web 表单验证不起作用（使用原始 javascript？）

Question

Currently working on an assignment where we are asked to:

Listen for the form submission (submit event) and check that each field is populated. Allow the form to submit if all fields are populated. Otherwise, cancel the submission and inform the user of the field that is missing.

I'm not sure as to why my code isn't working. I used addEventListener to listen for the form's submit event, and then created a list of if statements where if the user's input is blank, (""), then an alert button will pop up notifying the user, and it will stop the form from submitting using.preventdefault.

Here's my javascript:

form.addEventListener("submit", function validate(evt){
    
    if(evt.target[0]== ""){
        alert("Please enter your name!");
        evt.preventDefault;
    }

    if(evt.target[1]== ""){
        alert("Please enter your email!");
        evt.preventDefault;
    }

    if(evt.target[2]== ""){
        alert("Please enter the message's subject!");
        evt.preventDefault;
    }

    if(evt.target[3]== ""){
        alert("Please enter a message!");
        evt.preventDefault;
    }
    
});

And here is the link to the full page: https://github.uconn.edu/pages/ssw19002/dmd-3475/Week-8/web-form/web-form.html

I'm trying to do this using pure raw Javascript. No JQuery, or any other frameworks just because that's outside the scope of this assignment.

Answer 1

You are not calling the preventDefault method, but only giving a reference to the method. You are missing the brackets to actually execute the function. But here you go with another learning: You can store functions in variables and pass them around without using the brackets.

        evt.preventDefault; // wrong
        evt.preventDefault(); // correct

Edit: Missed that, indeed - as lil devil pointed out - you also need to take .value of your dom node to get the actual content.

However, a more profound way to perform your task would be actually referencing the inputs in your checks instead of going for children, as the form might contain other dom nodes as well. So something like this:

form.addEventListener('submit', e => {

  let invalid = [];

  Array.from(form.querySelectorAll('input')).forEach(node => {
    switch( node.getAttribute('type' ) {
       case 'text':
          // Check for Text values
          if( !textValidationFunction( node ) ) {
            invalid.push(node)
          }
          break;
       case 'checkbox':
          // Check for Checkbox values
          break;
     }
  })

   // Do the same for dropdowns etc.
   // And then, at best, split everything into single methods
 
  if( invalid.length > 0 ) {
    e.preventDefault();
    // Now you have all your invalid inputs in the invalid array to display them in whatever way you want.
    // Give them a red border, get the name attribute, ...
  }
   // Of course there are lots of other ways to structure this :)

})

Answer 2

You need to reference evt.target[0].value instead of just evt.target[0]