通过 onsubmit 属性提交表单时 HTML5 模式验证不起作用答案

【问题标题】：HTML5 Pattern Validation not working when submitting form through onsubmit attribute通过 onsubmit 属性提交表单时 HTML5 模式验证不起作用
【发布时间】：2019-07-29 01:23:50
【问题描述】：

我正在尝试通过 onsubmit 属性提交表单。但我希望HTML5 验证也能正常工作。

function submitForm() {
  if(somecondition){
      //used this to submit form without it I was not able to submit the form
      $("form#form").submit();
      return true;
  }
  else{
      return false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form" onsubmit="return submitForm()">
  <input type="text" pattern="[A-Za-z]" required>
</form>

但即使没有给出任何值，表单也会被提交。我

【问题讨论】：

不要在onsubmit 上调用submitForm() = 让它onsubmit="submitForm" 所以它只在您提交表单而不是在初始加载时调用该函数
嘿，我稍微编辑了帖子。 @IamL
我为你创建了这个小提琴：jsfiddle.net/lightblue/94wj7cnb 这应该可以工作

标签： javascript jquery html forms html5-validation

【解决方案1】：

当使用 JQuery 进行提交时，它不会查看 HTML 的验证，它会绕过它。但是，有一种方法可以做到这一点，如下所示。所以我在这里做的是。首先，为了保持简单，而不是在加载页面时触发 Submit，我使用 submitForm() 函数创建了一个链接。我还创建了一个不可见的提交按钮。然后在 submitForm() 函数中，您可以找到隐藏按钮并触发单击事件，该事件将触发按钮提交并验证您的 HTML。

这样您就可以使用 JQuery 来触发提交并编写您在 JQuery 中需要的任何其他代码。

编辑：将 sn-p 更改为在验证时仍使用 submit() JQuery 函数。

function submitForm(){
        // do some stuff
        
        if ($('#form')[0].checkValidity()) {
                 $('#form').submit();
            }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form">
    <input type="text" id="warning" required>
    
    <a href="javascript: void(0);" onclick="submitForm()">Login</a>
</form>

【讨论】：

@yashjain12yj 我编辑了我的答案，它现在在验证您的 HTML 时仍然使用 submit() 函数。

【解决方案2】：

你输入的模式属性是一个正则表达式，你可以手动提取它

const patternToMatch = $("input[type="text"]).attr("pattern");

然后用 :

实例化它

const regexp = new RegExp(patternToMatch);

为了最终确保输入在提交之前尊重它

function submitForm() {
     if ($("input[type="text"]).val().match(regexp)) {
            form.submit();
     } else {
            // display message
     }
}

这是盲编码，如果不起作用，请告诉我:)

【讨论】：

【解决方案3】：

如果输入与模式不匹配，则以下代码不应调用“提交”

<form action="search" method="post" id="form">
  <input type="text" pattern="[A-Za-z]" required title="1 letter only">
</form>

var form = $("#form");

form.on("submit", function(e){
e.preventDefault();
   alert('Submitted')
});

在这里工作小提琴：https://jsfiddle.net/lightblue/94wj7cnb/1/

对于模式：

[a-zA-Z] 匹配 A–Z 中的一个字母，大小写。
[a-zA-Z]+ 匹配一个或多个字母（一个单词）

在你的情况下，它只会匹配 1 个字母

【讨论】：