javascript - Bootstrap 模式上的取消按钮不会清除填充的数据

Question

当用户单击我的 jQuery 模态表单上的取消按钮时，如何清除填充的数据。

目前，当我点击取消按钮时，它只会关闭弹出框，当我重新打开它时，之前填充的数据仍会被存储。

请多多指教

 <form id="myform2" data-toggle="validator" class="form-horizontal" role="form" method="POST" action="#">
        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Full Name</label>
                <input required type="text" class="form-control" name="full_name"
                       value="{{ old('full_name') }}">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Username</label>
                <input required type="text" class="form-control" name="username"
                       value="{{ old('username') }}">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <label class="control-label popup-label">Password</label>
                <input pattern=".{5,10}" required title="5 to 10 characters"
                       type="password" class="form-control"
                       name="password" value="{{ old('password') }}">
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Create</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
            </button>
        </div>
    </form>

我也对表单字段使用了 Bootstrap 验证。

$(document).ready(function () {
    $('#myform2').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            full_name: {
                validators: {
                    notEmpty: {
                        message: 'The Full Name field is required'
                    },
                    stringLength: {
                        min: 5,
                        max: 15,
                        message: 'The Full Name must be more than 5 and less than 15 characters long'
                    },

编辑

这是我的密码验证

password: {
    validators: {
        notEmpty: {
            message: 'The Password field is required.'
        },
        stringLength: {
            min: 5,
            max: 15,
            message: 'The Password must be more than 5 and less than 15 characters long'
        }

    }
} 

Answer 1

只需为取消按钮指定一个id="reset"

<button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Cancel</button>

下面的代码可以解决问题

$(document).ready(function() {
    $("#reset").click(function() {
        $("input").val("");
    });
});

Fiddle Example

或者更好的方法，使用表单 id="myform2"

$(document).ready(function() {
    $("#reset").click(function() {
        $(':input','#myform2').val("");
    });
});

Fiddle Example with form id

或

使用 Bootstrap 验证插件，无需上述代码和取消按钮的任何更改，只需在 Bootstrap 验证脚本上方添加以下脚本即可。

    $('#myModal').on('hidden.bs.modal', function(){
        $(this).removeData('bs.modal');
        $('#myform2').bootstrapValidator('resetForm', true);
    });

    $('#myform2').bootstrapValidator({
            //Validation code comes here
    });

注意:这里我假设模态 id 是 #myModal 如果不是你必须将它更改为你的模态 id，这将使用取消按钮重置表单当模式关闭并再次打开时。

With Bootstrap validation example

With Bootstrap Validation example (auto reset inputs with preload values in form on modal load)