在第二个 function 中调用第一个 function 将调用第一个 function

Question

我需要调用 addPatron function，它将从 addpatron function 中调用 validateItems function。 当我单击 addPatron 按钮时，它应该提交表单，除非没有输入数据。 但是我遇到了麻烦，因为当单击按钮而不添加信息时，我会收到错误消息，但是当我输入信息时，错误消息仍然存在并且表单不会提交。 我不确定我是否正确地从 ValidateItem function 调用 addPatron function。 请帮忙。 这是代码。

var $ = function (id) {
  return document.getElementById(id)
}

var validateItems = function () {
  addpatron()

  var isValid = true

  var firstName = $('firstname').value
  $('firstname').focus() // puts crusor on field

  if (firstName == '') {
    $('firstnameerror').innerHTML = 'Enter First Name'
    isValid = false
  }

  var lastName = $('lastname').value

  if (lastName == '') {
    $('lastnameerror').innerHTML = 'Enter Last Name'
    isValid = false
  }

  var myEmail = $('email').value

  if (myEmail == '') {
    $('emailerror').innerHTML = 'Enter Email'
    isValid = false
  }

  var myCity = $('city').value

  if (myCity == '-') {
    $('cityerror').innerHTML = 'Select a City from the list'
    isValid = false
  }

  var myDonation = $('donation').value

  if (myDonation == '') {
    $('donationerror').innerHTML = 'Enter Donation Amount'
    isValid = false
  } else if (isNaN(myDonation)) {
    $('donationerror').innerHTML = 'Amount must be numeric'
    isValid = false
  }

  return isValid
}

var addpatron = function () {
  var isValid = validateItems

  if (isValid == true) {
    $('myform').submit()
  } else {
    $('endmessage').innerHTML = 'Patron Not Added!'
  }
}

var clearfields = function () {
  firstname.value = ''
  lastname.value = ''
  email.value = ''
  city.value = '-'
  donation.value = ''

  firstnameerror.innerHTML = ''
  lastnameerror.innerHTML = ''
  emailerror.innerHTML = ''
  cityerror.innerHTML = ''
  donationerror.innerHTML = ''
  endmessage.innerHTML = ''
}

window.onload = function () {
  $('validateItems').onclick = addPatron
  $('firstname').focus() // puts the crusor on field
  $('clearfields').onclick = clearfields
}

Answer 1

您不需要在validateItems中调用addPatron ，但您确实需要在addPatron中调用validateItems :-)

var validateItems = function () {
  // addpatron() // don't call this

  var isValid = true

  var firstName = $('firstname').value
  $('firstname').focus() // puts crusor on field

  if (firstName == '') {
    $('firstnameerror').innerHTML = 'Enter First Name'
    isValid = false
  }

  var lastName = $('lastname').value

  if (lastName == '') {
    $('lastnameerror').innerHTML = 'Enter Last Name'
    isValid = false
  }

  var myEmail = $('email').value

  if (myEmail == '') {
    $('emailerror').innerHTML = 'Enter Email'
    isValid = false
  }

  var myCity = $('city').value

  if (myCity == '-') {
    $('cityerror').innerHTML = 'Select a City from the list'
    isValid = false
  }

  var myDonation = $('donation').value

  if (myDonation == '') {
    $('donationerror').innerHTML = 'Enter Donation Amount'
    isValid = false
  } else if (isNaN(myDonation)) {
    $('donationerror').innerHTML = 'Amount must be numeric'
    isValid = false
  }

  return isValid
}

var addpatron = function () {
  var isValid = validateItems() // do call this

  if (isValid == true) {
    $('myform').submit()
  } else {
    $('endmessage').innerHTML = 'Patron Not Added!'
  }
}

Answer 2

请问 Jenkins 是否正确。

此外，您的 CSS 选择器是错误的。 我认为您的意图是找到具有id="firstname" 、 id="firstnameerror"等属性的 html 元素。在 CSS 选择器中， #表示按 id 查找元素，所以你真的想要$('#firstname') ，等等

而且看起来你不明白 jquery。 Jquery 对象与https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API中记录的原始 DOM 元素不同。 原始 DOM 元素是浏览器脚本中可用的最低级别的 DOM 接口。 Jquery 是一个建立在它之上的库。 一个 jquery object 代表一个 DOM 元素（或多个元素，或者根本没有）。 但是 jquery 对象上可用的方法与原始 DOM 元素上可用的方法完全不同，您似乎正在尝试使用它们。 Note that, since a jquery object can represent no objects at all, jquery will not throw an exception when it encounters a CSS selector which fails to match any elements in the DOM.

有不同的方法来解决这个问题。 您可以完全接受 jquery，使用 jquery 中可用的所有方法，而不是您学过的方法。 例如， $('validateItems').onclick = addPatron将变为$('validateItems').click(addPatron) 。 有关详细信息，请参阅 jquery.com。 或者你可以使用原始 DOM 的东西。

您也可以混合使用这两种方法，只要您不会混淆这两种方法。 例如，我相信 jquery 对象可以像原始 DOM 元素的 arrays 一样被取消引用，即$('#firstname')[0]将是第一个（也是唯一一个）具有 id firstname的 DOM 元素。 这意味着您可以像对待任何 DOM 元素一样对待它； 例如， var firstName = $('#firstname')[0].value 。 （虽然很烦人，我在文档中找不到这个。）相反，如果element是原始 DOM 元素，则$(element)是包含该元素（而不是其他元素）的 jquery object 。

使用原始 DOM 元素很笨拙。 方法名称很长，并且存在不同浏览器之间不一致的问题（尽管我怀疑这并不像以前那么糟糕）。 Jquery 在我看来更好。 但是 jquery 现在也相当过时了。 更现代的东西使用诸如 React 之类的库，它使用不同的范例来避免忘记更新页面部分等问题。