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);
}

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

1 个答案: