2016-03-26 45 views
0

嗨,我是新來的網站,所以請原諒我,如果這是一個愚蠢的問題。在JavaScript驗證後發送表單數據

所以我做了表單驗證,點擊按鈕後會觸發(type = "button")。 驗證後,我必須調用PHP文件,我可以將數據插入MySql。 我做了同樣的提交按鈕(type = "submit"),沒有驗證。

我不知道如何做一個接一個。

如何在JavaScript中驗證後調用php?

+0

你有什麼開始?我會建議在你的javascript驗證後使用ajax觸發php – magicianiam

回答

0

我們可能需要查看您的代碼才能正確使用,但正常的做法是在您的onsubmit事件偵聽器中進行驗證,如果驗證失敗,請致電event.preventDefault();,以停止提交的表單。如果驗證成功,則表單應該正常提交。

0

通過js在客戶端應用兩邊驗證 - 您可以使用jquery驗證「 - 這僅用於用戶交互,並確保數據從任何惡意代碼或sql注入都是乾淨的 但大多數攻擊者阻止js從所以我們再拍一次在服務器端也和真正的安全 - 這不能停止在瀏覽器的攻擊,因此第一個驗證的第一步似乎沒有價值。 在你的問題

0

使用XMLHttpRequest或者編寫更多的代碼您正在使用jQuery使用$.ajax sumbit數據到您的php頁面。

0

我相信你想要什麼是:

var FormValidation = function() { 


     // validation using icons 
     var handleValidation = function() { 
      // for more info visit the official plugin documentation: 
       // http://docs.jquery.com/Plugins/Validation 

       var form = $('#form'); 
       var error = $('.alert-danger', form); 
       var success = $('.alert-success', form); 

       form.validate({ 
        errorElement: 'span', //default input error message container 
        errorClass: 'help-block help-block-error', // default input error message class 
        focusInvalid: false, // do not focus the last invalid input 
        ignore: "", // validate all fields including form hidden input 
        rules: { 



         yourfield: { 
          minlength: 1, 
          required: true, 
          min: 0,        
          number: true 
         }, 

        }, 

        invalidHandler: function (event, validator) { //display error alert on form submit    
         success.hide(); 
         error.show(); 
         //Metronic.scrollTo(error, -200); 
        }, 

        errorPlacement: function (error, element) { // render error placement for each input type 
         var icon = $(element).parent('.input-icon').children('i'); 
         icon.removeClass('fa-check').addClass("fa-warning"); 
         icon.attr("data-original-title", error.text()).tooltip({'container': 'body'}); 
        }, 

        highlight: function (element) { // hightlight error inputs 
         $(element) 
          .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group 
        }, 

        unhighlight: function (element) { // revert the change done by hightlight 

        }, 

        success: function (label, element) { 
         var icon = $(element).parent('.input-icon').children('i'); 
         $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group 
         icon.removeClass("fa-warning").addClass("fa-check"); 
        }, 

        submitHandler: function (form) { 
         success.show(); 
         error.hide(); 
         form[0].submit(); // submit the form 
        } 
       }); 


     } 



     return { 
      //main function to initiate the module 
      init: function() { 


       handleValidation(); 


      } 

     }; 

     }(); 
0

//調用您的表單JavaScript函數提交即的onsubmit = 「返回使用functionName()」

//在JavaScript函數,如果驗證區,然後

迴歸真實;

//否則

return false;

//使用按鈕類型:

類型= 「提交」