沒有提交按鈕的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，按鈕->`Absenden

問題的“背景”是：我想先驗證表單輸入，然后（如果所有輸入都可以）打開一個模式，在這里您可以選擇重定向頁面（重定向是，重定向否），然后提交表單通過郵寄到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，請進行驗證。 http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin

Answer 2

您可以在每次輸入更改時調用validate函數：

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

Answer 3

因此，我想您想使用Javascript進行前端驗證。 有包裝的庫可以做到這一點。 例如， validate.js ， verifyjs以及這一個 ...

而且，您可以將驗證過程綁定到輸入的模糊事件上。使用清晰的文檔， JQuery validate是一個不錯的選擇。 您只需要下載.js庫並將其放在Web文件夾下的某個位置，然后使用標記將其包括在內。 並在要驗證的表單上調用.validate（）函數。 那應該做。

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

Answer 4

運用

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

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

您應該考慮使用jQuery表單驗證（例如http://formvalidator.net/或http://jqueryvalidation.org/之類的庫）或創建自己的jQuery表單驗證。

干杯