如何使用 javascript 创建一个 function，它将检查字段值/用户输入并在输入正确时显示警报？

Question

我正在尝试使用 javascript 创建一个 function，它将检查用户在提交表单时在字段中输入的内容，以及输入的值是否正确（基于预定义的值）以显示警报。 到目前为止我有这个：

function checkFieldAndShowPopup(fieldValue, predefinedValue) {
 predefinedValue = 5;
 fieldValue = document.getElementById('kdxalh').value;
 if (fieldValue === predefinedValue) {
 alert('Field input is correct!');
 }
}

我的问题是我无法更改提交按钮以运行 onclick 事件，因此我可以运行 function。有没有办法在没有 onclick 事件的情况下运行 function？

我试图将提交按钮更改为具有 onclick 事件，但由于我使用的是带有表单生成器的框架，所以我无法传递它。

形式：

<form id="contact-form106">
   <div class="breakdance-form-field breakdance-form-field--text">
   <label class="breakdance-form-field__label" for="kdxalh"> Your Answer 
    <span class="breakdance-form-field__required">*</span>
   </label>
   <input class="breakdance-form-field__input" id="kdxalh" aria-describedby="kdxalh" type="text" name="fields[kdxalh]" placeholder="" value="" required="">
   </div>
   <footer class="breakdance-form-field breakdance-form-footer">
   <button type="submit" class="button-atom button-atom--primary breakdance-form-button">
  <span class="button-atom__text">Submit</span>
  </button>
  </footer>
</form>

Answer 1

你可以通过 addEventListener() 方法来做到这一点，例如

<button type="submit" id="elmId" class="button-atom button-atom--primary breakdance-form-button">
  <span class="button-atom__text">Submit</span>
  </button>

var elm = document.getElementById("elmId")
elm.addEventListener("click", myFunction);

function myFunction() {
  // do what ever you need
}

Answer 2

非常有趣的框架，不会让您控制事件！

但无论如何，我会尝试向您建议其他实现您想要的方法，尽管从定义“好代码”的角度来看它们可能并不完美。

1个

您可以尝试找到该表单或该按钮（如果它没有随机哈希）并直接向其添加侦听器

const form = document.querySelector("form-wrapper > div  form")
form.addEventListener("submit",()=>{alert("Hi mom")})

const button = document.querySelector("form-wrapper > div form > button")
button.addEventListener("click",()=>{alert("Hi mom")})

2个

您可以收听另一个事件，但也许那不是您想要的您可以收听输入的change事件，当它正确时，只需显示您的弹出窗口