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("");
    });
});

小提琴示例

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

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

帶有表單id的小提琴示例

要么

使用bootstrap驗證插件，無需上述代碼和取消按鈕的任何更改，只需在引導驗證腳本上方添加以下腳本即可。

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

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

注意：這里我假設模態id是#myModal如果不是你必須將它改為你的模態id ，當模態關閉並重新打開時，這將使用cancel按鈕重置表單。

使用Bootstrap驗證示例

使用Bootstrap驗證示例（自動復位輸入，在模態加載時具有預加載值）

Answer 2

添加新的id屬性以取消按鈕

<button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel
                                                </button>
<script type="text/javascript">
    $(document).ready(function() {
        // clear input values
        $('#cancel').on('click', function() {
            $('form').find('input').val('');
        });

    });

</script>