form.submit() и проверка HTML5

По причинам дизайна я не могу использовать

<input type="submit" />

отправить форму. Вместо этого код выглядит следующим образом:

<a onclick="form.submit()"></a>

Форма содержит элементы с

required="required"

приписывать. К сожалению, проверка HTML5 не работает таким образом. Это работает должным образом с обычной кнопкой отправки все же.

Есть идеи, почему? Есть ли способы запустить проверку HTML5 без использования кнопки отправки?

Отредактировано согласно вашему запросу:

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

2 ответа

Ты можешь попробовать <a onclick="if(form.checkValidity()) form.submit()"></a>

Хотя может быть лучше использовать CSS, чтобы применить свой собственный дизайн и использовать нативные кнопки.

Обновление:

Кажется, для запуска собственной проверки требуется обычная кнопка. Таким образом, возможное решение было бы использовать скрытую кнопку и вызвать клик с помощью 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>

Для решения на основе CSS (не требуется JS), используя обычную кнопку, проверьте эту скрипку

Если вы хотите отобразить собственные сообщения об ошибках, которые есть в некоторых браузерах (например, Chrome), к сожалению, единственный способ сделать это - отправить форму, например:

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

а потом:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};
Другие вопросы по тегам