驗證通過AJAX加載的表單頁面

-1

如何驗證通過頁面上的AJAX加載的表單。我正在使用jquery validate.js。插入。我通過ajax加載表單後調用驗證函數，但它不起作用。驗證通過AJAX加載的表單頁面

jQuery代碼：

$(document.body).on('click', '.submitBtn', function(){ 
    var id=$(this).attr('id'); 
    $("#form"+id).validate({ 
    submitHandler: function() { 

     // do anything 

    } 
    }); 
});

任何幫助將得到高度讚賞。

來源

2014-04-25 Shilpi Singh

你的意思是'jquery.validate.js'？ – Liam

檢查控制檯是否有錯誤。我認爲當你運行'validate'方法時'$（「＃form」+ id）'還不可用。 –

如果我假設您有一個main頁面和ajax頁面中的ajax表單，看起來像是在主頁面中靜態地保存了表單驗證的代碼。甚至在阿賈克斯發生之前。

因此當加載main頁面時，驗證代碼會運行，但它不會找到"#form"+id（因爲它尚未加載）。因此插件的事件綁定失敗。

你可以做的是發送驗證腳本以及你的ajax響應，以便驗證代碼只在你載入表單並且事件被正確綁定後才運行。

OLD AJAX FILE

//contains only the form

新的Ajax FILE

//contains the form 
//then contains the validation code.

注 -還有其他的方法來做到這一點。就像使用jQuery的live方法一樣。快速谷歌會給你不少結果。

來源

2014-04-25 08:31:45

如果仔細查看他的代碼，您會發現他很好且真正使用委託（源自.submitBtn的事件由document.body委託）。所以它的綁定是可以的。看看我的回答， – wander

如果'id'是一個字符串，並且它構建了一個像「#formTHESTRING」這樣的字符串，那麼選擇器就沒有問題了。 –

「#formTHESTRING」表示一個id爲「ormTHESTRING」的元素。顯然這是一個錯誤的選擇。 – wander

這是一個簡單的語法錯誤，更改"#form"+id到"form#"+id 這裏的jsfiddle。

$(document.body).on("click", "form", function() { 
    var id = $(this).attr('id'); 
    $("form#" + id).validate({ 
     submitHandler: function() { 
      alert("submit"); 
     } 
    }); 
});

我想知道爲什麼你用這種醜陋的方式選擇元素。如果表單沒有id屬性，則選擇將失敗。我認爲this更好

來源

2014-04-25 08:40:49 wander

這個代碼在表單已經加載時正常工作。。但在頁面上通過ajax加載表單時不起作用。 –

正如你所看到的，表單是動態添加的，而不是從啓動時添加的......只需用ajax替換附加代碼即可。 – wander

@ShilpiSingh - 正如我所說的那樣試試jQuery'live'，或者將腳本放在'ajax'響應本身的表單之後。 –

驗證通過AJAX加載的表單頁面

回答

相關問題