[英]How to create a function using javascript which will check a field value/user input and show alert if the input is correct?
I am trying to create a function using javascript which will check what the user inputted in a field when the form is submitted and if the value inputted is correct (based on predefined value) to show an alert.我正在尝试使用 javascript 创建一个 function,它将检查用户在提交表单时在字段中输入的内容,以及输入的值是否正确(基于预定义的值)以显示警报。 So far I have this:到目前为止我有这个:
function checkFieldAndShowPopup(fieldValue, predefinedValue) {
predefinedValue = 5;
fieldValue = document.getElementById('kdxalh').value;
if (fieldValue === predefinedValue) {
alert('Field input is correct!');
}
}
My problem is that I cannot change the submit button to run to have an onclick event so I can run the function. Is there a way to run the function without onclick event?我的问题是我无法更改提交按钮以运行 onclick 事件,因此我可以运行 function。有没有办法在没有 onclick 事件的情况下运行 function?
I have tried to change the submit button to have an onclick event but since I am using a framework with form builder I am not able to pass it.我试图将提交按钮更改为具有 onclick 事件,但由于我使用的是带有表单生成器的框架,所以我无法传递它。
Form:形式:
<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>
you can do that by addEventListener() method, for example你可以通过 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
}
Very interesting framework that doesn't give you the control of events!非常有趣的框架,不会让您控制事件!
But anyway i'll try to suggest you other ways of implement what you want, though they could be not perfect from the perspective of definition "good code".但无论如何,我会尝试向您建议其他实现您想要的方法,尽管从定义“好代码”的角度来看它们可能并不完美。
you can try to find that form or maybe that button (if it's not has the random hash) and add listener to it directly您可以尝试找到该表单或该按钮(如果它没有随机哈希)并直接向其添加侦听器
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")})
you can listen another event, but maybe that's not what you wanted You can listen change
event of input, and when it's correct just show your pop-up您可以收听另一个事件,但也许那不是您想要的您可以收听输入的change
事件,当它正确时,只需显示您的弹出窗口
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.