Question

How to post form by clicking in anchor element下面的代码用于使用元素发布电子邮件地址。必须使用POST方法，因为真实表单包含许多大字段。

如果输入了无效的电子邮件地址（没有@符号），则会发布此无效的电子邮件。我希望当前的Chrome可以执行基本的电子邮件验证，并且不允许没有@字符的电子邮件地址。

如何在提交前强制浏览器验证电子邮件地址？

<html>
<body>
    <form id="_form" method='post' target='_blank'>
        <input type="email" value="me@company.com" name="_email" />
        <a href='SendEMail?_entity=DokGReport&amp;_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浏览器，我们还需要模拟隐藏提交按钮中的点击。

我尝试了下面的代码但是没有出现验证工具提示，也没有提交表单。怎么解决？

<!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&amp;_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>

Answer 1

首先在顶部添加此项，以防您还没有：

 <!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验证。但是，您会注意到小工具包没有显示出来。我发现以编程方式调用它的唯一方法是这个库：

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.html5validation.js

如何在从锚点发布表单之前强制验证input type = email元素

1 个答案: