Question

开发一个Bootstrap 4网站并使用Parsley验证表单。文本字段和选择下拉列表已成功通过验证，但单选按钮未通过验证。

        <div class="mb-3">
            <label for="firstname">First name</label>
            <input type="text" class="form-control" id="firstname" name="firstname" placeholder="" required>
        </div>

        <div class="mb-3">
            <label>Do you live in Northern Ireland?</label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ireland" id="ireland1" value="yes" required>
              <label class="form-check-label" for="ireland1">Yes</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ireland" id="ireland2" value="no">
              <label class="form-check-label" for="ireland2">No</label>
            </div>
        </div>

    <script>
    $("#personal").parsley({
       errorClass: 'is-invalid',
       errorsWrapper: '<div class="invalid-feedback"></div>',
       errorTemplate: '<span></span>',
       trigger: 'change'
    });
</script>

我认为Parsley正在尝试将无效反馈div添加到无线电组的错误位置。任何建议都将不胜感激，因为我是Web开发的新手。

Answer 1

我通过在无线电输入周围添加一个单独的容器来解决此问题，如下所示：

        <div class="mb-3">
        <label>Do you live in Northern Ireland?</label>
        <div id="error-container">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ireland" id="ireland1" value="yes" data-parsley-errors-container="#error-container" required>
              <label class="form-check-label" for="ireland1">Yes</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="ireland" id="ireland2" value="no" data-parsley-errors-container="#error-container">
              <label class="form-check-label" for="ireland2">No</label>
            </div>
        </div>
    </div>

此解决方案的问题在于，我需要为每个无线电组创建一个唯一的ID。

Bootstrap 4和Parsley无法验证自定义或普通单选按钮

1 个答案: