如何从 JavaScript 中的 Handler 函数获取返回值？

Question

我能够从我用来存储表单信息的对象中获取信息，当一个人尝试在未成功填写字段的情况下触发提交时，但是当我正确输入所有信息时，我似乎无法获得成功后一样吗？

      var theForm = document.getElementsByTagName('form')[0];
      var firstNameInput = document.getElementById('firstNameInput');
      var lastNameInput = document.getElementById('lastNameInput');
      var emailInput = document.getElementById('emailInput');
      var stateInput = document.getElementById('stateInput');

      var theButton = document.querySelector('input[type=submit]');

      // Wire the form's submit event to a callback
      theForm.addEventListener('submit', validate);

      function validate(e) {

          // Error tracking variable
          var error = false;

          // Do validations
          var emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

          var formData = {
              'firstName': null,
              'lastName': null,
              'email': null,
              'stateInput': null
          }

          if ((firstNameInput.value == '') || (firstNameInput.value == null)) {
              firstNameInput.classList.add('invalid-input');
              firstNameInput.nextElementSibling.style.display = 'block';
              firstNameInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          if ((lastNameInput.value == '') || (lastNameInput.value == null)) {
              lastNameInput.classList.add('invalid-input');
              lastNameInput.nextElementSibling.style.display = 'block';
              lastNameInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          if (!emailPattern.test(emailInput.value)) {
              emailInput.classList.add('invalid-input');
              emailInput.nextElementSibling.style.display = 'block';
              emailInput.nextElementSibling.innerHTML = 'Please enter valid email address!';
              error = true;
          }

          if ((stateInput.value == 'selectstate')) {
              stateInput.classList.add('invalid-input');
              stateInput.nextElementSibling.style.display = 'block';
              stateInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          // If error, stop the event
          if (error) {
              e.preventDefault();
              e.stopPropagation();
              console.log('There is no data from the form: ');
              for (var prop in formData) {
                  console.log(prop + ' : ' + formData[prop]);
              }
              return false;

          } else {

              formData['firstName'] = firstNameInput.value;
              formData['lastName'] = lastNameInput.value;
              formData['email'] = emailInput.value;
              formData['stateInput'] = stateInput.value;
              console.log('There is now data from the form: :) ');
              for (var prop in formData) {
                  console.log(prop + ' : ' + formData[prop]);
              }
              return true;
          }
      }

我试过这个：

var result = theForm.addEventListener('submit', validate);

  if (result) {
    console.log(result);
  }

任何帮助，将不胜感激！

Answer 1

根据 w3schools.com 的说法，这个函数 addEventListener() 不返回任何内容。

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

如果您想知道事件侦听器是否安装正确，则需要检查该函数是否存在：

if(theForm.addEventListener){
    theForm.addEventListener('submit', validate);
}else{
    theForm.attachEvent('onclick', validate);
}