输入字段禁用时Parsley表单不验证的问题求助

问题背景 #

表单字段可通过按钮切换启用/禁用状态，无论状态如何表单都能提交。启用时Parsley验证正常，但调用$form.parsley().whenValidate()时，禁用字段不会被验证；但单独验证单个禁用字段（如$('#firstName').parsley().validate()）却能得到正确结果。当前临时方案是提交前手动启用所有字段再验证，想找更优解，使用Parsley 2.9.1版本。

最优解决方案 #

1. 修改Parsley全局排除规则

Parsley默认会跳过禁用字段的验证，可通过初始化时配置excluded选项覆盖该行为：

• 如果仅需要验证带有必填规则的禁用字段：

$('.user-form').parsley({
  excluded: ':hidden, :disabled:not([data-parsley-required="true"])'
});

• 如果需要验证所有禁用字段，直接移除:disabled排除项：

$('.user-form').parsley({
  excluded: ':hidden'
});

2. 手动指定验证字段集合

不想修改全局配置的话，提交时可手动收集目标字段（含禁用字段），批量验证：

$('button[type="button"]').on('click', function() {
  const $form = $('.user-form');
  const parsleyForm = $form.parsley();
  // 收集所有带Parsley验证规则的字段
  const targetFields = $form.find('[data-parsley-required]').map(function() {
    return $(this).parsley();
  }).get();

  // 针对指定字段执行验证
  parsleyForm.whenValidate(targetFields)
    .then(() => {
      // 验证通过，提交表单
      $form.submit();
    })
    .catch(() => {
      // 处理验证失败逻辑
      console.log('字段验证未通过');
    });
});

3. 优化临时启用字段的方案

若保留临时启用字段的思路，可在验证完成后恢复字段状态，避免影响用户体验：

$('button[type="button"]').on('click', function() {
  const $form = $('.user-form');
  // 记录所有禁用字段的原始状态
  const disabledFields = $form.find(':disabled');
  
  // 临时启用字段
  disabledFields.prop('disabled', false);

  $form.parsley().whenValidate()
    .then(() => $form.submit())
    .catch(() => console.log('验证失败'))
    .finally(() => {
      // 恢复字段禁用状态
      disabledFields.prop('disabled', true);
    });
});

完整代码示例（结合方案2） #

<form class="user-form">
  <div class="form-group row mb-3 d-flex align-items-center">
    <label class="control-label col-md-3 text-end">First Name</label>
    <div class="col-md-9">
      <input
        type="text"
        class="form-control"
        id="firstName"
        name="firstName"
        data-parsley-required="true"
        disabled
      />
    </div>
  </div>
  <div class="form-group row mb-3 d-flex align-items-center">
    <label class="control-label col-md-3 text-end">Last Name</label>
    <div class="col-md-9">
      <input
        type="text"
        class="form-control"
        id="lastName"
        name="lastName"
        data-parsley-required="true"
        disabled
      />
    </div>
  </div>
</form>
<button type="button">Submit</button>

<!-- 引入jQuery和Parsley.js 2.9.1库 -->
<script>
$(function() {
  $('button[type="button"]').on('click', function() {
    const $form = $('.user-form');
    const parsleyForm = $form.parsley();
    const targetFields = $form.find('[data-parsley-required]').map(function() {
      return $(this).parsley();
    }).get();

    parsleyForm.whenValidate(targetFields)
      .then(() => {
        alert('验证通过，即将提交表单');
        // $form.submit();
      })
      .catch(err => {
        console.log('验证失败:', err);
        alert('验证失败，请检查输入');
      });
  });
});
</script>

内容的提问来源于stack exchange，提问作者Zaa