如何从锚点发布表单之前强制验证输入type = email元素 [英] How to force validation of input type=email element before form posting from anchor
问题描述
下面的代码来自>如何通过点击锚点来发布表单元素用于使用元素发布电子邮件地址.由于实际形式包含很多大字段，因此必须使用POST方法.
Code below from How to post form by clicking in anchor element is used to post email address using a element. POST method must be used since real form contains lot of large fields.
如果输入了无效的电子邮件地址(不带@符号)，则会张贴此无效的电子邮件. 我希望当前的Chrome浏览器能够执行基本的电子邮件验证，并且不允许没有@字符的电子邮件地址.
If invalid e-mail address is entered (without @ sign), this invalid email is posted. I expect that current Chrome performs basic email validation and does not allow email addresses without @ characters.
如何强制浏览器在提交之前验证电子邮件地址?
How to force browser to validate email address before submit ?
<html>
<body>
<form id="_form" method='post' target='_blank'>
<input type="email" value="me@company.com" name="_email" />
<a href='SendEMail?_entity=DokGReport&_dokumnrs=135361'
id='sendemail' class='button'>
Send
</a>
</form>
<script>
$(function () {
$('#sendemail').button({ icons: { primary: "ui-icon-mail-closed" } })
.click(function () {
e.preventDefault();
$('#_form').attr('action', $(this).attr('href')).submit();
});
});
</script>
</body>
</html>
更新
从答案中我得到了信息，以启用本地hmtl5验证工具提示并允许使用较旧的非html5浏览器，我们还需要模拟隐藏提交按钮中的点击.
From answer I got information that to enable native hmtl5 validation tooltip and allow to use older non html5 browsers also we need to simulate click in hidden submit button.
我在下面尝试了代码，但是没有出现验证工具提示，并且未提交表单. 如何解决?
I tried code below but validation tooltip does not appear and form is not submitted. How to fix?
<!DOCTYPE html>
<html>
<body>
<form id="_form" method='post'>
<input type="email" value="me@company.com" name="_email" />
<button type="button" id='sendemail'
data-url='SendEMail?_entity=Report&_dokumnrs=135361'>
Perform HTMl5 validation and show error message, post on success only.
Post without validation if browser does not support html5
</button>
<button type="submit" style='visibility:hidden' id='realSubmit' />
</form>
<script>
$(function () {
$('#sendemail').button({ icons: { primary: "ui-icon-mail-closed" } })
.on('click', function () {
showModeless('Sending e-mail. please wait');
$('#_form').attr('action', $(this).attr('data-url'));
if ($('#realsubmit').click()) {
// html5 validation with tooltip succeeds or browser does not support it
// avoid duplicate submits if clicked multiple times
$('#_form').prop('disabled', true);
}
});
});
</script>
</body>
</html>
推荐答案
如果尚未添加，请首先将其添加到顶部:
First add this at the top, in case you haven't yet:
<!DOCTYPE html>
然后尝试:
$(function () {
$('#sendemail').button({ icons: { primary: "ui-icon-mail-closed" } })
.click(function (e) { // this line changed
e.preventDefault();
// Below formIsValid is custom validation, checkVlidity invokes HTML5 validation
if(formIsValid() && !document.getElementById("_form").checkValidity())
{
$('#_form').attr('action', $(this).attr('href')).submit();
}
});
这使您可以搭载HTML5验证.但是，您会注意到该小工具没有出现.我发现以编程方式调用该库的唯一方法是:
This allows you to piggyback on the HTML5 validation. However, you'll notice that the little toolip doesn't show up. The only way I have found to programmatically invoke that is this library:
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.html5validation.js
这篇关于如何从锚点发布表单之前强制验证输入type = email元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
