Question

完全不知所措，在网上搜索了两天，试图找到一个简单的解释，说明如何使用JQuery验证验证表单无济于事......如果有人可以指出我哪里出错了' d确实有助于确保我不会心脏病发作。这是我的表格（请仅评论验证，我不想听到良好的编码实践）：

<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错误控制台。

你有两个问题打破了Validate插件......

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

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

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

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

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

form='contact-page-form'

它应该包含id的{{1}}，但由于您的form是id，这也会破坏Validate插件。（但是，在这种情况下，由于您的test-form已经在textarea内，<form>属性对此元素完全没有必要且多余，可以/应该删除。）< / p>

备注：

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

form

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

如果您坚持在使用$('input, textarea').on('focus', function () { $(this).attr('placeholder', ''); }); type="submit"或button的情况下使用锚标记，则有一种解决方法......

input

使用jQuery <a id="button"> .... </a>处理程序...

click

DEMO＃2：http://jsfiddle.net/b9co72xj/

最后，要在没有页面刷新的情况下提交表单，您可以将$('#button').on('click', function(e) { e.preventDefault(); $('#test-form').submit(); });置于$.ajax()方法的the submitHandler callback function之内。

.validate()

DEMO＃3：http://jsfiddle.net/b9co72xj/2/

Answer 2

USE远程方法

      remote: { 
                    param: {
                        url:siteUrlStatic+"checkNameDuplicate/",
                        dataType: "json",

                        data: {
                            full_name: function () {
                                return $("#full_name").val();
                            }

                        },

                        async:false 
                    }
                },

Ajax表单验证和提交

2 个答案: