Bootstrap 4和Parsley未验证自定义或正常单选按钮

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添加到无线电组的错误位置。任何建议都将不胜感激，因为我是网络开发的新手。

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。