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

Question

I was trying to submit things using a div, HTML5, JavaScript. If I use a submit button the validator (required attribute in the inputs) works the button doesn't submit info. But if I use a div tag it doesn't validate and send the info. Any way to fix it? Or should I do the whole code to validate the info and stop the submit?

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

Answer 1

If you are submitting via JS then you need to call the form validation yourself. I don't see any issues in your post that would prevent the submit though (without validation). But here's a working example. Keep in mind that not all browsers support html5 validation.

 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

I had a similiar problem and solved it this way.