我可以同时使用 onclick 和 onsubmit 事件吗? [英] Can I use onclick and onsubmit events together?
问题描述
我正在制作一个网站注册页面,我需要首先验证我的表单,然后如果表单有效,我需要运行一些功能
I am making a website sign up page in which I need to first validate my form and then if the form is valid i need to run some function
我不喜欢 jquery.请用 js 提出答案.过去,我试过这个功能,但只有 onclic 功能有效......当表单有效并且我点击按钮时什么也没有发生
I would not prefer jquery. Please suggest answers with js.In the past,I've tried this function but only the onclic function works...when the form is valid and i click the button nothing happens
<form onsubmit=" // function to take place on submit "> // This
// function should take place if form has been validated by alerts as // well
<input required>
<input required>
<button type="submit" onclick="fn(); fn2(); fn3()" // I need to use onclick here as // these functions are validations using javascript alert
</form>
required 属性用于验证我正在使用 javascript 浏览器验证来验证表单.但是 javascript 警报验证是针对数字的(例如,我使用 if 条件仅在数字范围从 1 到 10 时才接受数字).如果表单有效,则赋予 onlick 的函数将不显示任何内容.并且在提交时,我需要它仅在表单有效时显示一些信息.
required attribute is for validation I am validating the form with javascript browser validation. But the javascript alert validation is for numbers(for eg. i used if condition to accept a number only if it ranges from 1 to 10).The functions given to onlick will not display anything if form is valid. And onsubmit i need it to display some information only if form is valid.
我希望如果表单无效,那么我给 onclick 的警报功能应该可以工作,当表单有效时,当我点击提交按钮时,它应该显示消息.
I expect that if the form is invalid then the alert functions i have given to onclick should work and when the form is valid, when i click the submit button it should display the message.
推荐答案
欢迎 Buckyball,如果我理解你的话,你需要一些验证然后提交你的数据.
Welcome Buckyball, if I understood you well, you need some validations and then submit your data.
A) 如果您在使用 min
和 max
时遇到问题,可以尝试使用 pattern
正则表达式.
A) If you have some problems using min
and max
, you can try a pattern
with a regular expression.
<form>
<input pattern="\b([1-9]|10)\b" title="Number between 1 and 10" required>
<button>Submit</button>
</form>
https://jsfiddle.net/80mbd62w/
B) 如果你想用 JS 验证.
B) If you want to validate with JS.
<form>
<input required>
<button>Submit</button>
</form>
JS
const $input = document.querySelector('input')
document.querySelector('form').onsubmit = e => {
// You can add as many validations as you want
if (!/\b([1-9]|10)\b/.test($input.value)) {
alert('Number has to be between 1 and 10')
e.preventDefault() // aborting
} else {
alert('ok') // after this the data will be submitted
e.preventDefault() // don't forget to remove this line
}
}
https://jsfiddle.net/so2ecwrL/
C) 如果您想使用 onclick
和 onsubmit
事件.
C) If you want to use onclick
and onsubmit
events.
document.querySelector('form').onsubmit = e => {
alert('submit')
e.preventDefault() // don't forget to remove this line
}
document.querySelector('button').onclick = e => {
alert('button')
}
https://jsfiddle.net/uf4wxnoy/
希望这会有所帮助或至少为您指明正确的方向:)
Hope this help or at least point you to the right direction : )
这篇关于我可以同时使用 onclick 和 onsubmit 事件吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!