使用jquery验证的Materializecss不起作用

HTML markup;

HTML标记;

<div id="address" class="col s12">
    <div class="row">
        <form method="post" action="" id="addressDetails">
            <div class="input-field col s6">
                <textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                <label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
            </div>
            <div class="input-field col s6">
                <textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
                <label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
            </div>
        </form>
    </div>
    <div class="row center-align">
        <button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
    </div>
</div>

JavaScript code:

JavaScript代码:

function updateProfile(event) {
    console.log(this);
    event.preventDefault();
    form = $(this).closest('.col.s12').find('form');
    $.ajax('profile/updateProfile.php', {
        type: "POST",
        dataType: "json",
        data: form.serialize(),
        success: function(result) {
            Materialize.toast(result.message, 4000);
        },
        error: function() {
            Materialize.toast("Failed: Please contact admin.", 4000);
        },
        timeout: 5000
    });
}

$(document).ready(function() {
    $("button.updateProfile").on('click', updateProfile);
});

Earlier with normal form submission validation was working. But now with jQuery AJAX request I am able to send data, but when form is invalid then it shows error in red but it accepts the form with error.

在正常的表单提交验证工作之前。但是现在使用jQuery AJAX请求，我可以发送数据，但是当表单无效时，它会显示红色的错误，但是它接受错误的形式。

When I am using $("button.updateProfile").on('sumbit', updateProfile); it is validating but it is reloading the page and preventDefault is not working.

当我使用$(“button.updateProfile”)时。(“sumbit”,updateProfile);它正在验证，但正在重载页面，preventDefault不工作。

1 个解决方案

#1

$("button.updateProfile").on('click', updateProfile);

$(" button.updateProfile”)。(“点击”,updateProfile);

This will not validate with the help of materialize validate. You have to look for submit.

这在materialize validate的帮助下不会生效。你必须寻找提交。

Again with submit it will have problem, it is not looking for submission in form.

同样的，提交它会有问题，它不是寻找提交的形式。

$("button.updateProfile").on('sumbit', updateProfile);

$(" button.updateProfile”)。(“sumbit”,updateProfile);

Instead of button use form, then will look for form submission. Like this

代替按钮使用表单，然后将查找表单提交。像这样

$("form").on('submit', updateProfile);

$(“形式”)。(‘提交’,updateProfile);

This will work perfectly.

这将工作完美。

So remember whenever you are submitting a form check for submit on form not on submit buttons.

因此，请记住，无论何时提交表单检查，提交表单时不要提交按钮。

#1