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

xt0899hw  于 2022-12-16  发布在  HTML5
关注(0)|答案(3)|浏览(187)

我试图通过onsubmit属性提交表单。但我希望HTML验证也能工作。

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>

但即使在不给出任何值之后,表单也会被提交。

nx7onnlm

nx7onnlm1#

当使用JQuery来提交时,它不会检查HTML的验证,它只是绕过它。但是,有一种方法可以做到这一点,如下所示。因此,我在这里所做的是。首先,为了保持简单,而不是在加载页面时触发Submit,我创建了一个带有submitForm的链接()函数。我还创建了一个不可见的提交按钮。然后在submitForm中()函数,您可以找到隐藏的按钮并触发一个单击事件,该事件将触发从按钮提交并验证您的HTML。
这样,您就可以使用JQuery来触发submit,并在JQuery中编写您需要的任何其他代码。
编辑:更改代码段,以便在验证时仍使用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>
plupiseo

plupiseo2#

输入的模式属性是一个regexp,您可以手动提取它

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

这是盲编码,让我知道如果它不工作:)

zte4gxcn

zte4gxcn3#

如果输入与模式不匹配,则以下代码不应调用“submit

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

相关问题