Form submit with javascript and input required

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>

http://www.dropmocks.com/mCyfGJ

Im using the following code. Javascript submit: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

i guess this is what you looking for http://stackoverflow.com/questions/8053394/how-to-do-something-before-on-submit — F.C.Hsiao, Jan 13 '14 at 01:46

score 7 · Answer 1 · edited Mar 29 '21 at 08:53

7

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>

edited Mar 29 '21 at 08:53

vsync

118,978
58
307
400

answered Jan 13 '14 at 01:45

cyberwombat

38,105
35
175
251

1

Check out the link. As you can see if I use get the validation (Please fill out this field) but if I use javascript It sends the info and doesn't validate. The inputs have the attribute require. – nanoalvarez Jan 13 '14 at 02:07
I'm not seeing a link besides dropmocks. Am I missing it? – cyberwombat Jan 13 '14 at 02:12
I'm saying dropmocks link. – nanoalvarez Jan 13 '14 at 02:15
It doesn't work. And actually I'm writing the JS, jquery, etc in different files, I'm trying to avoid to work with embedded JS. I tried addListener() but it didn't work. Any Idea? – nanoalvarez Jan 14 '14 at 03:28
Might help to create a jsFiddle for this - I tested the code above in Chrome and it worked though Safari 7 doesn't seem to listen to native html5 validation – cyberwombat Jan 14 '14 at 03:57

score 0 · Answer 2 · edited Nov 30 '22 at 18:16

0

I had a similiar problem and solved it this way.

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

You can use a function to not handle it on element.

edited Nov 30 '22 at 18:16

Vili

1,599
15
40

answered Jan 29 '22 at 20:33

SergioTally

1

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 30 '22 at 04:04

Form submit with javascript and input required

2 Answers2

Linked