Question

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

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

您不需要在addPatron中致电validateItems，但是您确实需要在validateItems中致电addPatron：-）

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

詹金斯会是对的。

此外，您的CSS选择器是错误的。我认为您的意图是查找具有属性id="firstname"，id="firstnameerror"等的html元素。在CSS选择器中，#表示按ID查找元素，因此您确实想要{{1} }等。

您似乎不懂jquery。 jQuery对象与https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API中记录的原始DOM元素不同。原始DOM元素是浏览器脚本中可用的最低级别DOM接口。 jQuery是在其之上构建的库。一个jquery对象代表一个DOM元素（或多个元素，或者可能根本没有）。但是jquery对象上可用的方法与原始DOM元素上可用的方法完全不同，您似乎正在尝试使用这些方法。请注意，由于jquery对象根本无法表示任何对象，因此当jquery遇到CSS选择器无法匹配DOM中的任何元素时，它不会引发异常。

有多种解决方法。您可以使用jquery中可用的所有方法而不是您学到的方法来完全接受jquery。例如，$('#firstname')将变为$('validateItems').onclick = addPatron。有关更多详细信息，请参见jquery.com。或者，您可以使用原始的DOM内容。

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

使用原始DOM元素很麻烦。方法名称很长，并且在不同的浏览器之间存在一些不一致的问题（尽管我怀疑这并不像以前那样糟糕）。在我看来，jQuery更好。但是现在jQuery也相当过时了。更现代的东西使用诸如React之类的库，该库使用另一种范式设计，以避免发生诸如忘记更新页面的某些部分之类的问题。

在第二个函数中调用第一个函数，第二个函数将调用第一个函数

2 个答案: