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.
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>
Update
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>