html5 required and jQuery submit()

Question

I'm trying to implement html5 into a form, but I came with a problem when I submit the form through jquery and try to use the html5 "required" attribute.

Here is my form, quite simple:

<form action="index.php" id="loginform">
      <input name="username" required placeholder="username" type="text">    
      <a href="javascript:$('#loginform').submit();">Login</a>
</form>

The problem is that when the form is submited through jquery, It just by-passes the required attribute. I know that required should only work if the form is submitted by the user, not by a script, so when I change the anchor to a submit input it works perfect.

My point is if there is a way to force the jquery .submit() to use html5 required atribute.

Thanks in advance for the answers

If all your users are using Chrome you can use the checkValidity method. Example - too bad IE is still faaar behind. — user447356
– user447356, Commented Jul 8, 2012 at 7:33
'My point is if there is a way to force the jquery .submit() to use html5 required atribute.'. His form is most likely just to illustrate the issue without further complicating the issue. — Rasmus Søborg
– Rasmus Søborg, Commented Jan 5, 2013 at 19:28

iBet7o · Accepted Answer · 2013-02-28 08:20:00Z

46

I did the following

<form>
    ...
    <button type="submit" class="hide"></button>
</form>

<script>
    ...
    $(...).find('[type="submit"]').trigger('click');
    ...
</script>

¡it works!

answered Feb 28, 2013 at 8:20

iBet7o

7788 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lawrence Cherone Over a year ago

class="hide" or style="display:none"

pozs · Accepted Answer · 2012-07-08 10:12:30Z

39

You can

trigger click event on a submit
check validation manually with $("form")[0].checkValidity()
find invalid elements manually using $("form :invalid")

answered Jul 8, 2012 at 10:12

pozs

36.6k5 gold badges61 silver badges66 bronze badges

Comments

gregoireskazy · Accepted Answer · 2020-02-12 05:34:32Z

6

Here an exemple of my personnal solution:

var form = $('#loginform');

// Trigger HTML5 validity.
var reportValidity = form[0].reportValidity();

// Then submit if form is OK.
if(reportValidity){
    form.submit();
}

answered Feb 12, 2020 at 5:34

gregoireskazy

1042 silver badges4 bronze badges

Comments

Rab Khan · Accepted Answer · 2012-07-08 07:34:45Z

2

You are right. HTML5 validation works only when submit is triggered by user. this is how it is. :(

you need write a your own custom method on submit. OR there is a good plugin you can use which validates fields according html5 attributes.

here is the plugin link

answered Jul 8, 2012 at 7:34

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

Comments

Volodymyr · Accepted Answer · 2019-04-16 13:21:04Z

2

Answer from https://stackoverflow.com/a/30124479/7915308

<!DOCTYPE html>
<html>
<body>

<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>

</body>
</html>

answered Apr 16, 2019 at 13:21

Volodymyr

6086 silver badges10 bronze badges

Comments

AdamJones · Accepted Answer · 2014-03-10 19:17:21Z

1

I had exactly the same problem. I had a single button that I had deliberately set NOT to be a submit because it was on first click revealing a form. On a second click of the same button $('form[name=xxx]').submit(); was firing and I found as well that the HTML5 validation doesn't work.

My trick was to add a line of code so that after my first click of this button occurs I change its type to submit dynamically.

$("#btn").attr("type","submit");

Which worked like a charm!

answered Mar 10, 2014 at 19:17

AdamJones

6511 gold badge15 silver badges42 bronze badges

Comments

Conner · Accepted Answer · 2012-07-08 07:23:11Z

0

You could call a function instead and use that function to check if all the nodes with the required attribute have a value.

There are some plugins available to do this: http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

answered Jul 8, 2012 at 7:23

Conner

31.4k8 gold badges55 silver badges75 bronze badges

2 Comments

Dan Stern Over a year ago

im aware of that, Im trying to use jquery and html5 together, as I want to be html5 my main validator

Conner Over a year ago

There are some plugins available.

Stano · Accepted Answer · 2012-07-08 10:22:19Z

Here are some examples, how to validate html5:

function validateForm(form) {
  if (form.username.value=='') {
    alert('Username missing');
    return false;
  }
  return true;
}

<form action="index.php" name="loginform" method="post" onsubmit="if (!validateForm(this)) event.preventDefault();">
  <input name="username" placeholder="username" required="required" type="text" />
  <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();">Login1</a>
  <a style="cursor:pointer;" onclick="$(document.forms.loginform).submit();">Login2</a>
  <input name="send" type="submit" value="Login3" />
  <input name="send" type="button" value="Login4" onclick="$(document.forms.loginform).submit();" />
</form>

Full code here. One thing here is strange: $(document.forms.loginform).submit(); works fine, but document.forms.loginform.submit(); fails. Can somebody explain why?

Tats_innit · Accepted Answer · 2012-07-08 07:34:33Z

-1

Working demo http://jsfiddle.net/3gFmC/

Hope this will help :)

code

$('#btn_submit').bind('click', function() {

        $('input:text[required]').parent().show();
        // do whatever;
 });

answered Jul 8, 2012 at 7:34

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Collectives™ on Stack Overflow

html5 required and jQuery submit()

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related