嘗試使用帶有提交處理程序的jQuery表單驗證器提交表單

Question

嗨，我正在玩jQuery表單驗證器，表單驗證完全正常，問題是當我單擊“提交”時，頁面刷新了，這不是我想要的目標。 表單確實發布了數據，數據確實進入了我的數據庫，這是一件好事。

我的javascript文件

$().ready(function () {


$('#registerForm').validate({

    rules: {
        firstname: {
            required: true,
            nowhitespace: true,
            lettersonly: true,
        },
        surname: "required",
        password: {
            required: true,
            minlength: 5,
            maxlength: 10
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password1",
        },
        email: {
            nowhitespace: true,
        }

    },

    messages: {
        firstname: {
            required: 'Please enter a name',
        },
        surname: {
            required: 'Please enter a surname',
        },
        email: {
            required: 'Please enter an email address',
            email: 'Please enter a <em>valid</em> email'
        },
        password: {
            required: 'Please provide a password',

        },
        confirm_password: {
            required: 'Please confirm your password',

        }

    },

    errorElement: 'ul',
    errorPlacement: function (error, element) {
        let placement = $(element).data('error');
        if (placement) {
            $(placement).append(error)
        } else {
            error.insertAfter(element);
        }
    },

    submitHandler: function () {

        postContent();
    },

});

function postContent() {

    $('#registerForm').on('submit',function () {

        let that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};
        that.find('[name]').each(function (index, value) {
            let that = $(this),
                name = that.attr('name'),
                value = that.val();

            data['name'] = value;
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function (response) {
                console.log(response);
            }

        });

        return false;
    });
}

和html表單本身

<div id="registerModal" class="modal">
<div class="modal-content">

    <h4 class="center container">Register</h4>
    <div class="center" id="error-list">
        <ul id="required"></ul>
        <ul id="password"></ul>
        <ul id="passwordShort"></ul>
    </div>
    <div class="row center">
        <form class="col s12" action="account.php" method="post" id="registerForm" novalidate="novalidate">
            <div class="row">
                <div class="input-field col s12 l6">
                    <input id="first_name" type="text" class="validate" name="firstname" required>
                    <label for="first_name">First Name *</label>
                </div>
                <div class="input-field col s12 l6">
                    <input id="last_name" type="text" class="validate" name="surname" required>
                    <label for="last_name">Last Name *</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="email" type="email" class="validate" name="email" required/>
                    <label for="email">Email *</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s12">
                    <input id="password1" type="password" class="validate" name="password" required/>
                    <label for="password">Password *</label>
                    <ul id="passError"></ul>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="confirm_password" type="password" class="validate" name="confirm_password" required/>
                    <label for="email">Confirm Password *</label>
                </div>
            </div>
            <button class="btn waves-effect waves-light" id="register" name="register" type="submit">Register
                <i class="material-icons right">send</i>
            </button>
            <span>  </span>
        </form>
    </div>

</div>
<div class="modal-footer">
</div>

Answer 1

要阻止表單提交的默認行為刷新頁面，您需要添加以下內容。

$('#registerForm').on('submit',function (e) {
    e.preventDefault();
...

另一種方法是使用“ return false”； 這樣可以防止發生默認事件，也可以阻止該事件的傳播。

$('#registerForm').on('submit',function (e) {
    return false;
...