CODEWITHSUNDEEP
htmlvalidationconstraint-validation-api
bernland
bernland

Reputation: 688

How to make HTML validation work with onclick="form.submit()" instead of a type="submit" button/input

I have a form with the following code:

<form name="form" method="post" action="https://pilot.datatrans.biz/upp/jsp/getCcAliasFormMod.jsp" id="form_payment_cc" name="uppform">
    <label for"cvv">CVV</label><br />
    <input type="text" size="4" id="cvv" name="cvv" value="" required="required" />
    <p></p>
    <div class="order">
        <div></div> <div><a href="#" onclick="javascript:$( '#form_payment_cc' ).submit();"><img src="/images/pfeil_orange.png" style="margin-left: 30px;"><strong>Weiter</strong></a></div>
        </div>
    <input type="hidden" id="form__token" name="form[_token]" value="LaBK9OAZyhjENzWmCiCokS0kGXgFmbPNm7v1lo1LuRs" />
</form>

The form contains elements with the required="required" attribute. Unfortunately, for design reasons, I cannot use <input type="submit" /> to submit a form. Instead, I use <a onclick="form.submit()"></a>. HTML validation does not work when I try to submit this way.

Any ideas as to why? Are there ways to trigger HTML validation without using a submit button (I know that everything works when I use a regular submit button)?

Upvotes: 0

Views: 1035

Answers (2)

jens_vdp
jens_vdp

Reputation: 594

If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

and then:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

Upvotes: 0

Sebastian
Sebastian

Reputation: 17433

You can try <a onclick="if(form.checkValidity()) form.submit()"></a>

Though it might be better to use CSS to apply your custom design and use native buttons.

Update:

It seems a regular button is required to trigger native validation. So a possible solution would be to use a hidden button and trigger a click using JS:

<form>
  <input name="email" type="email" title="Enter your email" required />
  <input id="sumbitBtn" type="submit" style="position: absolute; left: -9999px" /> 
  <a href="#" onclick="document.getElementById('sumbitBtn').click();">Submit</a>
</form>

For a CSS based solution (no JS required) using a regular button check this fiddle

Upvotes: 1

Related Questions