How to force validation of input type=email elemen

2020-08-04 06:59发布

问题:

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&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>

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&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>

回答1:

First add this at the top, in case you haven't yet:

 <!DOCTYPE html>

Then try:

$(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();
                  }
              });

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