Question

我正在构建一个表单，并且停留在验证的一部分上。在表格中，我有能力根据所做的选择打开和关闭表格的各个部分。它是使用单选按钮选择选项的选择之一-我可以选择一个单选按钮并影响表单中的其他按钮。

因此，如果某人选择了单选选项之一，则该字段将按照应有的方式进行验证。如果我随后通过另一个单选按钮清除了这些选择，则可以更改属性并清除检查，但是清除这些字段后，经过验证的检查标记将不会消失。

在下面的代码中，当我选择一个单选按钮删除或保留志愿者时，我将获得验证。点击“清除操作”按钮，清除单选按钮，但不清除验证检查。

我一直在寻找有关此内容的信息，但在此实例中找不到任何有用的信息。任何人都可以提供的任何帮助将不胜感激。预先感谢。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" s>
        $(document).ready(function () {
            $('#theForm').bootstrapValidator({
                // framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields : {
                    va: {
                        validators: {
                            notEmpty: {
                                message: '* Select an action'
                            }
                        }
                    }
                }

            });

            $("#clearRadio").click(function() {
                if($(this).is(':checked')) {
                    $(".volStat").prop('checked', false);
                }
            });

        });
    </script>
</head>
<body style="background-color:#fff;">
<form role="form" id="theForm" class="form-horizontal" method="POST" action="#">
    <label class="control-label col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-0" for="clearRadio">Clear Actions</label>
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
        <label class="radio-inline" style="padding-left:0;"><input type="radio"  name="clearRadio" id="clearRadio" value="cl"/>Clear </label>
    </div>
    <label class="control-label col-xs-5 col-xs-offset-1 col-sm-4 col-sm-offset-0"><span class="labelRequired">*</span>Action</label>
    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
        <label class="radio"><input type="radio"  name="va" id="vaRemove" value="rem" class="volStat"/> Remove Volunteer</label>
        <label class="radio"><input type="radio"  name="va" id="vaRemain" value="keep" class="volStat"/> Keep Volunteer</label>
        <br><br>
        <button type = "submit" class = "btn">Submit</button>
    </div>
</form>
<script src="//forms.gsnetx.org/tctTest/formValidation.min.js"></script>
<script src="//forms.gsnetx.org/tctTest/bootstrapValidator.js"></script>
</body>
</html>

Answer 1

您应该可以在#clearRadio点击处理程序中执行此操作：

var data = $('#theForm').data('bootstrapValidator');
data.resetField('va');

尽管我看到jQuery在某个地方遇到了一个未定义的对象，但我还没有研究过。无论如何，这行得通，并且可能使您朝解决方案的正确方向发展。

此处的工作演示：http://jsbin.com/zamiwiwihi/edit?html,output

如何清除引导程序验证成功（或失败）类和图标？

1 个答案: