使用Validator Plugin Jquery驗證動態輸入表單元素

Question

我正在使用此http://jqueryvalidation.org/ jquery驗證插件。

HTML動態表單將如下所示

<form name="baby_book" id="baby_book">
<input name="form_elements[16]" id="form_elements[16]">
<input name="form_elements[17]" id="form_elements[17]">
<input name="form_elements[18]" id="form_elements[18]">

<a class="myfont baby_book_save" href="javascript:void(0)"  onclick="validatefilesizeform('save')" >Save</a> 
</form>

我的JS代碼會像這樣

<script type="text/javascript">
var validator="";

$(document).ready(function(){

var max_length_rules= <?php echo json_encode($valid_rules); ?>;

validator=$("#baby_book").validate();

     $.each(max_length_rules,function(k,v){

             $.each(v, function(key, value){

                   $('input[id="'+key+'"]').rules('add',"required"); 
                });
        });

});

function validatefilesizeform(type)
{
    if(type == 'save')
     {
         document.baby_book.sec_submit.value="save";

         if(validator.form())
         {
            document.baby_book.submit();
         }
    }

</script>

在應用像這樣的動態規則時，它不會驗證表單。

在控制台中顯示此錯誤

未被捕獲的TypeError：無法讀取未定義的屬性“ form”

誰能幫我增加動態規則。 謝謝。

Answer 1

這是因為，當瀏覽器在onclick屬性中找到validatefilesizeform('save')時，它將評估該表達式，即運行該函數。 使用這種語法，您可以將評估結果分配給onclick事件，這不是您想要的。

發生Cannot read property 'form' of undefined錯誤的Cannot read property 'form' of undefined因為此時尚未執行$(document).ready()回調，並且，當函數嘗試執行validator.form() ，該變量已未定義。 稍后將在$(document).ready()內部進行初始化。

為了獲得預期的行為並避免錯誤，必須將onclick處理程序更改為此：

`onclick="function() { validatefilesizeform('save') }"`

在這種情況下，您要注冊一個函數作為onclick屬性的值。 當單擊控件時，將評估此功能。

為了更加清楚：

// This is the value returned by the function evaluation:
validatefilesizeform('save')

// This is a function
function() { validatefilesizeform('save'); }

所以第二個是可以評估的函數。 第一個評估函數。 處理程序應始終是函數，而不是值。