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

当用户点击我的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'
        }

    }
} 

解决方法:

只需为取消按钮指定一个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验证插件,无需上述代码和取消按钮的任何更改,只需在引导验证脚本上方添加以下脚本即可.

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

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

注意：这里我假设模态id是#myModal,如果不是你必须将它改为你的模态id,当模态关闭并重新打开时,这将使用cancel按钮重置表单.

With Bootstrap validation example

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

标签：jquery,javascript,twitter-bootstrap,bootstrap-modal
来源： https://codeday.me/bug/20190611/1221951.html