Html5 требуется и jquery submit()

Я пытаюсь реализовать html5 в форме, но у меня возникла проблема, когда я отправляю форму через jquery и пытаюсь использовать атрибут html5 "required".

Вот моя форма, довольно простая:

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

Проблема заключается в том, что когда форма отправляется через jquery, она просто пропускает требуемый атрибут. Я знаю, что требуемый должен работать только в том случае, если форма отправлена ​​пользователем, а не с помощью script, поэтому, когда я меняю привязку на вход отправки, она работает отлично.

Моя точка зрения заключается в том, что есть способ заставить jquery.submit() использовать html5 необходимый атрибут.

Заранее благодарим за ответы

Ответы

Ответ 1

Я сделал следующее

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

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

¡он работает!

Ответ 2

Вы можете

  • trigger click событие в submit
  • проверить проверку вручную с помощью $("form")[0].checkValidity()
  • найти недействительные элементы вручную с помощью $("form :invalid")

Ответ 3

Вы правы. Проверка HTML5 работает только тогда, когда отправитель запускается пользователем. так оно и есть.: (

вам нужно написать собственный собственный метод отправки. ИЛИ есть хороший плагин, который вы можете использовать, который проверяет поля в соответствии с атрибутами html5.

вот ссылка плагина

Ответ 4

У меня была точно такая же проблема. У меня была единственная кнопка, которую я намеренно поставил НЕ, чтобы отправить, потому что это был первый щелчок, показывающий форму. На втором щелчке одной кнопки $('form [name = xxx]'). Submit(); был уволен, и я также нашел, что проверка HTML5 не работает.

Мой трюк состоял в том, чтобы добавить строку кода, чтобы после первого нажатия этой кнопки я меняю свой тип, чтобы отправить динамически.

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

Который работал как шарм!

Ответ 5

Вместо этого вы можете вызвать функцию и использовать эту функцию, чтобы проверить, имеют ли все узлы с обязательным атрибутом значение.

Для этого доступны некоторые плагины: http://thechangelog.com/post/1536000767/h5validate-html5-form-validation-for-jquery

Ответ 6

Вот несколько примеров, как проверить 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>

Полный код здесь. Здесь одно странно: $(document.forms.loginform).submit(); отлично работает, но document.forms.loginform.submit(); выходит из строя. Может кто-нибудь объяснить, почему?

Ответ 7

Ответ от fooobar.com/questions/432604/...

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

Ответ 8

Рабочая демонстрация http://jsfiddle.net/3gFmC/

Надеюсь, это поможет :)

код

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

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