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