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();
...

另一种方法是使用＆＃34; return false;＆＃34;这可以防止发生默认事件，并且还可以阻止事件传播。

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

尝试使用带有submitHandler的jquery表单验证器提交表单

1 个答案: