使用javascript提交表单并需要输入

Question

我尝试使用 div、HTML5、JavaScript 提交内容。如果我使用提交按钮，验证器（输入中的必需属性）起作用，按钮不会提交信息。但如果我使用 div 标签，它不会验证和发送信息。有什么办法可以解决吗？或者我应该做整个代码来验证信息并停止提交？

<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

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

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>

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();}">

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