parsley.js - 禁用最大長度驗證

Question

我想在用戶在窗體上的選擇列表上進行選擇時，動態地禁用我的幾個輸入字段的parsley.js最大長度。

我已閱讀此thread，但是當我將代碼放入我的字段時，香菜不會被觸發，而是表單提交，而我不明白爲什麼。

我看了parsley.js文檔，但我無法理解爲什麼parsley.js驗證時，我添加以下代碼行忽略：

$('#id_employment_record_position_title').attr('data-parsley-maxlength', '0'); 

或

$('#id_employment_record_position_title').attr('data-parsley-maxlength', '150'); 

這是我的代碼，以動態TURM對香菜的驗證和關閉，當用戶更改窗體上的選擇列表：

function toggleFormDetails() { 

    if ($('#id_employment_record_display_type').val() == '8888' || $('#id_employment_record_display_type').val() == '9999') { 

     //disable the input field.   
     $('#id_employment_record_position_title').prop('disabled', true); 
     .... 

     //destroy parsley on the form. 
     //$('#employment_history_details_form').parsley().destroy(); 

     //disable the parsley maxlength, when the input field is disabled. 
     $('#id_employment_record_position_title').attr('data-parsley-maxlength', '0'); 

     //reinitialise parsley on the form. 
     //$('#employment_history_details_form').parsley(); 

    } else { 

     //enable the input field. 
     $('#id_employment_record_position_title').prop('disabled', false); 
     .... 

     //destroy parsley on the form. 
     //$('#employment_history_details_form').parsley().destroy(); 

     //change the parsley cs error values for all the required form inputs. 
     $('#id_employment_record_position_title').attr('data-parsley-maxlength', '150'); 

     //reinitialise parsley on the form. 
     //$('#employment_history_details_form').parsley(); 

    } 

} 

爲什麼我必須添加銷燬&在窗體上創建歐芹代碼（我已經在上面評論過）？

爲此編寫自定義驗證會更好嗎？如果是這樣，我該怎麼做，B/C我的JS代碼技能還不夠好？

Answer 1

香菜是一個JavaScript庫和作品是這樣的：

1. 當你渲染HTML表單，您可以通過數據屬性指定需要驗證。

2. 您表示該表格將由歐芹通過表單屬性data-parsley-validate或通過JavaScript通過$("#form").parsley()驗證。

當香菜被綁定到表單（第二步驟）中，型ParsleyForm的對象將被創建包含每個字段的約束。

創建對象後，不再需要html屬性。因此，如果您更改了任何屬性，它將不會對驗證產生影響，因爲Parsley會驗證JavaScript對象的約束。這就是爲什麼你需要銷燬綁定parsley的&（爲了重新創建帶有新約束的parsley實例）。

爲了解決您的問題，你可以做這樣的事情：

<form id="myForm" class="form-horizontal" method="post"> 
    <input type="text" name="id_employment_record_display_type" 
      id="id_employment_record_display_type" 
      placeholder="Set 8888 to discard maxlength validation" /> 
    <input type="text" name="sample" id="id_employment_record_position_title" 
      data-parsley-maxlength="150" /> 
    <button type="submit">Submit</button> 
</form> 

<script> 
$(document).ready(function() { 
    $("#myForm").parsley(); 

    $("#id_employment_record_display_type").on('change', function() { 
     $("#myForm").parsley().destroy(); 
     if ($(this).val() == '8888' || $(this).val() == '9999') { 
      $('#id_employment_record_position_title').removeAttr('data-parsley-maxlength'); 
      $('#id_employment_record_position_title').prop('disabled', true); 
     } else { 
      $('#id_employment_record_position_title').attr('data-parsley-maxlength', '150'); 
      $('#id_employment_record_position_title').prop('disabled', false); 
     } 

     $("#myForm").parsley(); 
    }); 

    $("#myForm").submit(function() { 
     $(this).parsley().validate(); 
     // when there are no client side errors when the form is submitted 
     if ($(this).parsley().isValid()) { 
      console.log('no client side errors!'); 
     } else { 
      console.log('form is not valid'); 
     } 
     event.preventDefault(); 
    }); 
}); 
</script> 

您還可以檢查this working jsfiddle