1

Bootstrap を使用してモーダル ダイアログを作成しましたが、モーダル ダイアログ ボックスが閉じられた後または送信された後に、フォームの入力フィールドがクリアされないという問題があります。

HTML

    <!-- Password Reset Modal -->
<div id="passwModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4>Forgot Password?</h4>
        <p>Please enter your registered email address below and a new password will be sent to you.</p>
    </div>
    <div class="modal-body">
        <div id="sent"><!-- Display sent message after password reset -->
            <form class="form-horizontal" id="reset">
                <div class="control-group">
                    <label class="control-label" for="Email">Username</label>
                    <div class="controls">
                        <input class="input-large" type="email" id="Username" name="Username" placeholder="Email Address">
                    </div>
                </div>
                <div class="controls">
                    <button class="btn btn-inverse" id="close" value="CANCEL" data-dismiss="modal" aria-hidden="true">CLOSE</button>
                    <button class="btn btn-success" id="submit">SEND</button>
                </div>
            </form>
        </div><!-- end of sent -->
    </div>
</div><!-- end of Password Reset Modal -->

JavaScript (検証 & ajax)

    $(document).ready(function () {
jQuery.validator.addMethod("accept", function (value, element, param) {
    return value.match(new RegExp("." + param + "$")); });
$("#register").validate({
    rules: {
        FirstName: {
            required: true,
            accept: "[a-zA-Z]+"
        },
        LastName: {
            required: true,
            accept: "[a-zA-Z]+"
        },
        Pwd: {
            required: true,
            minlength: 8
        },
        CPwd: {
            required: true,
            minlength: 8,
            equalTo: "#Pwd"
        },
        Email: {
            required: true,
            email: true
        },
        Agree: "required"
    },
    messages: {
        FirstName: {
            required: "First name required.",
            accept: "Letters only please."
        },
        LastName: {
            required: "Last name required.",
            accept: "Letters only please."
        },
        Pwd: {
            required: "Please create a password.",
            minlength: "Password must be at least 8 characters."
        },
        CPwd: {
            required: "Please confirm password.",
            minlength: "Password must be at least 8 characters.",
            equalTo: "Passwords do not match."
        },
        Email: "Email address is not valid.",
        Agree: "Please accept our policy."
    },
    submitHandler: function() {
        $.ajax({
            type: "POST",
            url: "../process.php",
            data: $('form#register').serialize(),
            success: function (msg) {
                $("#thanks").html(msg)
            },
            error: function () {
                alert("failure");
            }
        });
      }
    });
  }); // end document.ready
4

2 に答える 2

4

現在 v3.1.1 である新しい Bootstrap を使用している人にとっては、これに対する回答が必要なため、以前の回答を更新するだけです!

    $('#passwModal').on('hidden.bs.modal', function (e) {
         $('#Username').val('');
     });
于 2014-05-07T21:03:30.967 に答える