javascript - Ajax 表单验证和提交

Question

这里完全不知所措，在网上搜索了两天，试图找到如何使用 JQuery 验证来验证表单的简单解释，但无济于事......如果有人能指出我哪里出错了，那就'这对确保我不会心脏病发作非常有帮助。这是我的表单(请仅对验证发表评论，我不想听到良好的编码实践):

<form id='test-form' class='contact-form'>
    <ul>
        <li><label for="full_name">Name*</label></li>
        <li><label for="email">E-mail*</label></li>
        <li><input id='full_name' type='text' name='full_name' onfocus="this.placeholder = ''" placeholder='Name' required></li>
        <li><input id='email' type='text' name='email' onfocus="this.placeholder = ''" placeholder='E-mail' required></li>
        <li>Message</li>
        <li><textarea style='color: white; width: 100%; height:180px; background: #333333; border: none; border-radius: 3px; outline:none; font-family: montserrat;' form='contact-page-form' onfocus="this.placeholder = ''" placeholder='Please enter your message here'></textarea></li>
        <li>Mobile Number (Optional)** <i style='font-size: 0.6em;'>for SMS updates</i></li>
        <li><input type='text' name='phone' onfocus="this.placeholder = ''" placeholder='Phone Number' ></li>
        <li>
        <div class='big-button form-submit'> 
            <a onclick='document.getElementById("test-form").submit();'>
                <div>
                    <i class="fa fa-envelope-o big message"></i>
                    SUBMIT MESSAGE
                </div>
            </a>
        </div>
        </li>
    </ul>
    <div class='name'>
        <input type='text' name='name' placeholder='First Name'> // Honey pot
    </div>
</form>

还有我的脚本:

$(document).ready(function(){
    $('.name').hide();

    $('#test-form').validate();
});

所有其他必要的 Jquery 位都已导入......

我的主要提示是提交的表单没有经过任何形式的验证。我想使用 PHP，但不幸的是这个网站必须完全使用 AJAX 构建，因此不允许刷新...提前干杯，K

Answer 1

将来，您可以节省大量时间，只需查看 JavaScript 错误控制台即可。

您有两个问题破坏了验证插件...

1) 提交链接的 anchor 标记上的内联 JavaScript 绕过 click触发验证的事件。

<a onclick='document.getElementById("test-form").submit();'>
    ....
</a>

此插件需要 type="submit" button或input 。因此，您只需将 anchor 标记替换为 <button>标签，从而消除了对内联 JavaScript 的需要 submit() 。一个<button>元素还允许您使用 CSS 进行样式设置，使其看起来与文本链接完全相同。

<button type="submit">
    ....
</button>

2) form您的 <textarea> 中的属性设置如下...

form='contact-page-form'

它应该包含 id form的，但是因为你的id是 test-form ，这也会破坏验证插件。 (但是，在这种情况下，由于您的 textarea 已经在您的 <form> 内部，因此 form 属性在此元素上完全不必要且多余，可以/应该删除。)

注释:

使用 jQuery 时，占位符的内联 JavaScript 很丑陋且不必要。您可以改用单个 jQuery 处理函数。

$('input, textarea').on('focus', function () {
    $(this).attr('placeholder', '');
});

工作演示:http://jsfiddle.net/b9co72xj/1/

<小时/>

如果您坚持使用 anchor 标记，则应使用 type="submit" button或input ，有一个解决方法...

<a id="button">
    ....
</a>

使用 jQuery click处理程序...

$('#button').on('click', function(e) {
    e.preventDefault();
    $('#test-form').submit();
});

演示#2:http://jsfiddle.net/b9co72xj/

<小时/>

最后，要在不刷新页面的情况下提交表单，您可以输入 $.ajax() the submitHandler callback function内.validate()的方法。

$('#test-form').validate({
    submitHandler: function(form) {
        var data = $(form).serialize();
        // your ajax goes here
        $.ajax({
            ....
        });
        return false;
    }
});

演示#3:http://jsfiddle.net/b9co72xj/2/