Question

我正在使用Jquery .submit()函数通过JQuery提交表单。但是我有一些在HTML中标记为required的字段。提交表单之前，我应该如何使用.submit()函数检查必填字段？

‌

这是代码

<script>
function submit() {
    $("form").submit();
}

function signup() {
    alert("You're going to sign up");
}
</script>

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
    <div class="input">
        <label for="email">Email:</label>
        <input required="" id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required="" type="password" id="password"/>
    </div>

    <a class="submit" href="JavaScript:submit();">Sign Up</a>
    <button type="submit" class="none_display"></button>
</form>

由于某些浏览器中a和button标签的样式更改，我需要使用input标签提交表单。

Answer 1

首先，您有一个内联调用的submit（）方法，它转过来提交表单，然后执行其内联signup（）方法，然后才真正起作用，这有点奇怪。只需调用注册即可，而不是submit（）。

但是您的实际问题。

$(':input[required]').filter(function(){ return !this.value.trim() })

此命令将查找所有具有必需属性且没有值的输入。如果找到任何内容，请不要执行ajax。

下面的示例对逻辑进行了一些重构，以便实际上显示了“提交”按钮，但其样式看起来像一个链接。

$('form').on('submit', function(e){
  e.preventDefault();
  var blankRequiredFieldsExist = $(e.target).find(':input[required]').filter(function(){
    return !this.value.trim();
  }).length;
  
  if (!blankRequiredFieldsExist) {
    alert("You're going to sign up");
  }
});

.buttonAsLink {
  border: 0;
  background-color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: blue;
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
    <div class="input">
        <label for="email">Email:</label>
        <input required id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required type="password" id="password"/>
    </div>

    <button type="submit" class="buttonAsLink">Sign Up</button>
</form>

Answer 2

您发生了一些不必要的事情。

您不需要在表单上使用action="JavaScript:void(0);"。

删除<a class="submit" href="JavaScript:submit();">Sign Up</a>

function signup() {
    alert("You're going to sign up");
}

<form onsubmit="signup()">
    <div class="input">
        <label for="email">Email:</label>
        <input required="" id="email"/>
    </div>
    <div class="input">
        <label for="password">Password:</label>
        <input required="" type="password" id="password"/>
    </div>
    <button type="submit" class="none_display">Sign up</button>
</form>

Answer 3

您可以创建“提交”按钮并为此设置display: none;。然后在jquery中编写一些函数，以在用户单击锚点链接时单击提交按钮

<form action="JavaScript:void(0);" onsubmit="signup()" method="post">
  <input type="text" required="yes" />
  <input type="submit" style="display: none;" id="mysubmit" />
  <a href="JavaScript:void(0);" onclick='$("#mysubmit").click();'>Submit</a>
</form>

使用JQuery提交表单时，请检查HTML中标记为必填的字段

3 个答案: