没有提交按钮的 HTML5 表单验证

Question

我想验证没有 type="submit" 按钮的表单输入。 我该怎么做？

我试过了 ->

<script type="text/javascript">function validateForm() {
    $('#form1')[0].checkValidity()
   if( document.form1.vorname.value == "" )
   {
         return false;
   }
   if( document.form1.nachname.value == "" )
   {
         return false;
   }
   if( document.form1.postleitzahl.value == "" )
   {
         return false;
   }
   if( document.form1.email.value == "" )
   {
         return false;
   }
   if( document.form1.telefon_optin_Ja.value == "" )
   {
         return false;
    }
if( document.form1.ort.value == "" )
   {
         return false;
   }
   if( document.form1.straße.value == "" )
   {
         return false;
   }
   if( document.form1.Anrede.value == "" )
   {
         return false;


        }else { 
            $('#modal_absenden').modal({
              backdrop: 'static',
              keyboard: 'false',
                 })

    }
}
</script>

我的表单名称是：form1 , button -> `Absenden

问题的“背景”是：我想首先验证表单输入，然后（如果所有输入都正常）它应该打开一个模式，您可以在其中选择重定向页面（重定向是，重定向否）然后它通过 post 将表单提交到 mail.php。

我希望你理解我的问题，如果你有问题，请问。 （我的英语不太好..）

感谢您的帮助。

Answer 1

您已经谈到了 HTML5。

那么这意味着您所要做的就是将 checkValidity() 与

一起使用

 <input type="text" name="name" required>
<input type="email" name="email" required placeholder="Enter a valid email address">

这是一篇关于使用 HTML5 验证的好文章。

我自己没用过。但我很高兴从您的帖子中了解到一些信息。

http://www.the-art-of-web.com/html/html5-form-validation/

如果你想使用 jQuery one 然后去验证。 http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin

Answer 2

您可以在每次输入更改时调用您的验证函数：

$('#form1 input').change(validateForm);

Answer 3

使用

$("#form1 input").on('change,blur', validateForm); 

function validateForm() {
    // Caution : this refers to the HTMLElement
}

您应该考虑使用像 http://formvalidator.net/ 或 http://jqueryvalidation.org/ 这样的库之类的 jQuery 表单验证，或者创建您的。

干杯

Answer 4

所以我猜你想用 Javascript 做前端验证。有包装库可以做到这一点。例如，validate.js、verifyjs 和 this one，...

您可以将验证过程绑定到输入的模糊事件 JQuery validate 是一个不错的选择，文档清晰。您只需要下载 .js 库并将其放在您的 web 文件夹下的某个位置，并使用标记来包含它。并在要验证的表单上调用 .validate() 函数。应该这样做。

$('input').on('blur', function(){
    $("#myForm").validate();
});