Question

我正在尝试通过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>

但是即使没有提供任何值，该表单仍会提交。我

Answer 1

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

false

然后用实例化它：

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

最后确保输入得到尊重，然后再提交

const regexp = new RegExp(patternToMatch);

这是盲目编码，请告诉我它是否无效：）

Answer 2

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

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

编辑：将代码段更改为在验证时仍使用commit（）JQuery函数。

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

{{1}}

Answer 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个字母

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

3 个答案: