带有 jquery 验证的 Materializecss 不起作用答案

【问题标题】：Materializecss with jquery validation not working带有 jquery 验证的 Materializecss 不起作用
【发布时间】：2016-07-27 13:38:46
【问题描述】：

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 代码：

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);
});

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

当我使用 $("button.updateProfile").on('sumbit', updateProfile); 时，它正在验证但它正在重新加载页面并且 preventDefault 不起作用。

【问题讨论】：

标签： javascript jquery ajax forms materialize

【解决方案1】：

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

这不会在物化验证的帮助下进行验证。你必须寻找submit。

再次提交它会有问题，它不是在表单中寻找提交。

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

而不是按钮使用表单，然后会寻找表单提交。像这样

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

这将完美运行。

所以请记住，每当您提交表单时，请检查是否在表单上提交而不是在提交按钮上。

【讨论】：