javascript - 使用 JQuery 提交表单时检查 HTML 中所需的标记字段

Question

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

‌</p>

这是代码

<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的样式发生了变化，我需要使用标签提交我的表单。buttoninput

标签： javascriptjqueryhtmlforms

Answer 1

首先，有点奇怪的是你有一个内联调用的 submit() 方法，它转身提交表单，然后执行它的内联 signup() 方法，然后实际工作。只需调用注册而不是提交（）。

但是对于您的实际问题。

$(':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>