使用JavaScript提交表单和输入必填。

Question

我试图使用

、HTML5和JavaScript来提交内容。如果我使用提交按钮，验证器（输入中的required属性）可以工作，但按钮不会提交信息。但是，如果我使用

标签，则无法验证并发送信息。有什么方法可以修复它吗？或者我应该编写整个代码来验证信息并停止提交？

<form action="index.php" method="get" name='myform'>
  <ul>
    <li class="row">
      <label class="labels" for="username">Username</label>
      <input type="text" id="txtUser" required>
    </li>
    <li class="row">
      <label class="labels" for="password">Password</label>
      <input type="password" id="txtPass" required>
    </li>
    <li id="row2">
      <div class="button"><a href="javascript: submitform()">Submit</a></div>
      <input type="submit">
    </li>
  </ul>
</form>

http://www.dropmocks.com/mCyfGJ

我正在使用以下代码。 Javascript 提交： http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

- nanoalvarez

---

展示你的代码，这样我才能帮助你。 - F.C.Hsiao

我猜这就是你要找的：https://dev59.com/Omsz5IYBdhLWcg3wNVAR - F.C.Hsiao

Answer 1

如果您是通过JS提交表单，则需要自己调用表单验证。我在您发布的内容中没有看到任何会阻止提交的问题（没有验证）。但这里有一个有效的例子。请记住，并非所有浏览器都支持HTML5验证。

function submitform() {
  // Get first form element
  var $form = $('form')[0];

  // Check if valid using HTML5 checkValidity() builtin function
  if ($form.checkValidity()) {
    console.log('valid');
    $form.submit();
  } 
  
  else {
    console.log('not valid');
  }
  
  return false
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="index.php" method="get" name='myform'>
  <ul>
    <li class="row">
      <label class="labels" for="username">Username</label>
      <input type="text" id="txtUser" name="sds" required>
    </li>
    <li class="row">
      <label class="labels" for="password">Password</label>
      <input type="password" id="txtPass" required>
    </li>
    <li id="row2">
      <div class="button"><a href="" onclick="return submitform()">Submit</a></div>
      <input type="submit">
    </li>
  </ul>
</form>

- cyberwombat

---

请查看链接。正如您所看到的，如果我使用<input type="submit">进行验证（请填写此字段），但是如果我使用JavaScript，则会发送信息而不进行验证。输入具有要求属性。 - nanoalvarez

我除了Dropmocks之外没有看到其他链接，我错过了吗？ - cyberwombat

我是说要删除Dropmocks链接。 - nanoalvarez

它不起作用。实际上，我正在将JS、jQuery等写在不同的文件中，试图避免使用嵌入式JS。我尝试使用addListener()，但它没有起作用。有什么想法吗？ - nanoalvarez

可能需要为此创建一个jsFiddle - 我在Chrome中测试了上面的代码，虽然Safari 7似乎不会听取本地html5验证。 - cyberwombat

Answer 2

我之前有过类似的问题，是这样解决的。

<input type="submit" id="Guardar" name="Guardar" value="Guardar" onClick="if(this.form.checkValidity()){this.form.submit(); this.disabled=true; this.value='Enviando…';}else{this.form.checkValidity();}">

你可以使用一个函数来不处理它在元素上。

- SergioTally

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

在某些情况下，“this.form.reportValidity()”比“this.form.checkValidity()”更有效，因为后者可能不会触发浏览器的交互通知。注意：截至目前，某些常见浏览器可能不支持“reportValidity()”。 - undefined