2017-07-18 96 views
1

我使用bootstrapValidator.min.js 0.5.3在這一刻驗證表單: https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js引導驗證提交表單

現在,這工作得很好,其中i綁定發送郵件事件聯繫表單。

但是現在我想用它來表格,他需要驗證表單,發送郵件並提交表單,以便我可以將$ _POST字段寫入到mysql中。

還要注意,我有一個foreach循環來添加更多的對象時,使更多的窗體。 (表格用於申請工作,工作可以在後臺進行添加。)

代碼:

我不會發布形式HTML和PHP,因爲我知道他們的工作。除非問。它是一個非常長的形式,我不想用offtopic代碼混淆這個。

驗證:

jQuery('.form-job').each(function (i, obj) { 
     jQuery(this).bootstrapValidator({ 
      fields: { 
       firstname: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw naam in.' 
         } 
        } 
       }, 
       lastname: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw achternaam in.' 
         } 
        } 
       }, 
       street: { 
        validators: { 
         stringLength: { 
          min: 5, 
          message: 'Gelieve 5 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw straat in.' 
         } 
        } 
       }, 
       housenumber: { 
        validators: { 
         stringLength: { 
          max: 8, 
          message: 'Vul aub een geldige huisnummer in.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw huisnummer in.' 
         }, 
        } 
       }, 
       postal: { 
        validators: { 
         stringLength: { 
          min: 4, 
          max: 8, 
          message: 'Vul aub een geldige postcode in.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw postcode in.' 
         }, 
        } 
       }, 
       city: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw stad in.' 
         } 
        } 
       }, 
       country: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw land in.' 
         } 
        } 
       }, 
       email: { 
        validators: { 
         notEmpty: { 
          message: 'Vul aub uw e-mailadres in.' 
         }, 
         emailAddress: { 
          message: 'Vul aub een geldig e-mailadres in.' 
         } 
        } 
       }, 
       telephone: { 
        validators: { 
         numeric: { 
          message: 'Gelieve alleen nummers te gebruiken.', 
         }, 
         stringLength: { 
          min: 9, 
          message: 'Gelieve 9 of meer cijfers in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub een geldig telefoonnummer in.' 
         } 
        } 
       }, 
       motivation: { 
        validators: { 
         stringLength: { 
          min: 10, 
          max: 550, 
          message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw vraag in.' 
         } 
        } 
       }, 
       cvurl: { 
        validators: { 
         file: { 
          extension: 'doc,docx,pdf,txt', 
          type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt', 
          maxSize: 5 * 1024 * 1024, // 5 MB 
          message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.' 
         } 
        } 
       } 
      } 
     }) 
      .on('success.form.bv', function (e) { 
       jQuery("#button").css('color', 'green'); 
       jQuery("#button").css('border', '2px solid green'); 
       jQuery(".alert-success").css('display', 'block'); 
       jQuery("#button").html('Verstuurd'); 
       jQuery(this).data('bootstrapValidator').resetForm(); 

       // Prevent form submission 
       e.preventDefault(); 

       // Get the form instance 
       var form = jQuery(e.target); 

       // Get the BootstrapValidator instance 
       var bv = form.data('bootstrapValidator'); 

       jQuery.post(my_ajax_object.ajax_url, form.serialize()); 

      }); 
    }); 

不介意荷蘭請。任何荷蘭人都不應該擔心問題,因爲它只是顯示的文本。

而且我知道它說:

   // Prevent form submission 
      e.preventDefault(); 

但是,當我刪除或註釋掉沒什麼變化。

所以我需要它來驗證,發送郵件(工作),並提交。

謝謝!

回答

1

所以我做了這項工作。

問題是我試圖通過ajax槽通過BootstrapValidator發送郵件。

所以我結束了被刪除該定義的JS什麼的一部分,我有這個左:

jQuery('.form-job').each(function (i, obj) { 
     jQuery(this).bootstrapValidator({ 
      fields: { 
       firstname: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw naam in.' 
         } 
        } 
       }, 
       lastname: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw achternaam in.' 
         } 
        } 
       }, 
       street: { 
        validators: { 
         stringLength: { 
          min: 5, 
          message: 'Gelieve 5 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw straat in.' 
         } 
        } 
       }, 
       housenumber: { 
        validators: { 
         stringLength: { 
          max: 8, 
          message: 'Vul aub een geldige huisnummer in.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw huisnummer in.' 
         }, 
        } 
       }, 
       postal: { 
        validators: { 
         stringLength: { 
          min: 4, 
          max: 8, 
          message: 'Vul aub een geldige postcode in.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw postcode in.' 
         }, 
        } 
       }, 
       city: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw stad in.' 
         } 
        } 
       }, 
       country: { 
        validators: { 
         stringLength: { 
          min: 2, 
          message: 'Gelieve 2 of meer letters in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw land in.' 
         } 
        } 
       }, 
       email: { 
        validators: { 
         notEmpty: { 
          message: 'Vul aub uw e-mailadres in.' 
         }, 
         emailAddress: { 
          message: 'Vul aub een geldig e-mailadres in.' 
         } 
        } 
       }, 
       telephone: { 
        validators: { 
         numeric: { 
          message: 'Gelieve alleen nummers te gebruiken.', 
         }, 
         stringLength: { 
          min: 9, 
          message: 'Gelieve 9 of meer cijfers in te vullen.' 
         }, 
         notEmpty: { 
          message: 'Vul aub een geldig telefoonnummer in.' 
         } 
        } 
       }, 
       motivation: { 
        validators: { 
         stringLength: { 
          min: 10, 
          max: 550, 
          message: 'Vul aub minstens meer dan 10 letters in en minder dan 550.' 
         }, 
         notEmpty: { 
          message: 'Vul aub uw vraag in.' 
         } 
        } 
       }, 
       cvurl: { 
        validators: { 
         file: { 
          extension: 'doc,docx,pdf,txt', 
          type: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/txt', 
          maxSize: 5 * 1024 * 1024, // 5 MB 
          message: 'Het geselecteerd bestand is niet geldig. Dit moet een .doc, .docx, .pdf of een .txt zijn en max 5 MB groot.' 
         } 
        } 
       } 
      } 
     }) 
    }); 

然後,我只是調用一個函數與

if (isset($_POST['submit']) 
提交按鈕後,

(這是一個例子,絕對不要使用submit作爲提交按鈕的名稱)。

我調用的函數發送郵件,然後使用數據庫部分的查詢