0

我<form>正在获取该属性novalidate，这使他无法通过 jQuery.Validate 进行验证。我正在使用版本 1.9 和 1.11，并且都生成此错误。

我没有使用 HTM5 验证...

我的页面代码：

脚本：

<!-- JQUERY VALIDATION -->
    <script src="js/jquery.validate.js"></script>

    <script type="text/javascript">
            $(document).ready(function(){
                $("#enviando").hide();
                $("#form").validate({
                    rules: {  
                        nome: { required: true, minlength: 2 }, 
                        empresa: { required: true },
                        email: { required: true, email: true },             
                        telefone: { required: true },
                        assunto: { required: true },
                        mensagem: { required: true }
                    },  
                    messages: {  
                        nome: { required: 'Preencha o campo nome', minlength: 'No mínimo 2 letras' }, 
                        empresa: { required: 'Preencha o campo Empresa' },
                        email: { required: 'Informe o seu Email', email: 'Informe um Email válido' },               
                        telefone: { required: 'Informe seu Telefone' },
                        assunto: { required: 'Preencha o campo com o Assunto' },
                        mensagem: { required: 'Escreva sua Mensagem' }

                    },  
                    submitHandler: function( form ){
                        $("#form").hide();
                        $("#enviando").show();              
                        var dados = $( form ).serialize();  
                        $.ajax({  
                            type: "POST",  
                            url: "envia_contato.asp",
                            data: dados,  
                            success: function( data )  
                            {  
                                alert("teste");

                            }  
                        });  

                        return false;  
                    }           
                });

                $("#form").removeAttr("novalidate");

            //Input and Textarea Click-Clear
            $('input[type=text]').focus(function() {
                if($(this).attr('readonly') || $(this).attr('readonly') == 'readonly') return false;
                if ($(this).val() === $(this).attr('title')) {
                        $(this).val('');
                }   
                }).blur(function() {
                if($(this).attr('readonly') || $(this).attr('readonly') == 'readonly') return false;
                if ($(this).val().length === 0) {
                    $(this).val($(this).attr('title'));
                }                        
            }); 
            $('textarea').focus(function() {
                if ($(this).text() === $(this).attr('title')) {
                        $(this).text('');
                    }        
                }).blur(function() {
                if ($(this).text().length === 0) {
                    $(this).text($(this).attr('title'));
                }                        
            }); 



            });

        </script>

表格标记：

<div class="form_faleconosco">
                <div id="enviando"><br/><img src="imagens/ajax-loader.gif"><br/><span>ENVIANDO FORMULÁRIO</span></div>

                <form action="" id="form" class="feedback_form"  method="post">
                    <label class="label-name"></label>
                    <input class="field-name form_field" type="text" title="Name" value="Name" name="nome" style="width: 400px;"/>
                    <div class="clear"></div>
                    <label class="label-empresa"></label>
                    <input class="field-empresa form_field" type="text" title="Empresa" value="Empresa" name="empresa" style="width: 400px;"/>
                    <div class="clear"></div>
                    <label class="label-email"></label>
                    <input class="field-email form_field" type="text" title="Email" value="Email" name="email" style="width: 400px;"/>
                    <div class="clear"></div>
                    <label class="label-phone"></label>
                    <input class="field-phone form_field" type="text" title="Telefone" value="Telefone" name="telefone" style="width: 400px;"/>
                    <div class="clear"></div>
                    <label class="label-subject"></label>
                    <input class="field-subject form_field" type="text" title="Assunto" value="Assunto" name="assunto" style="width: 400px;"/>
                    <div class="clear"></div>
                    <label class="label-message"></label>
                    <textarea class="field-message form_field" title="Mensagem" rows="5" cols="45" name="mensagem" style="width: 400px;">Mensagem</textarea>
                    <div class="clear"></div>
                    <input id="submit2" class="feedback_go" type="button" value="Enviar Mensagem" name="submit"/>
                </form>

            </div>

现场版：http ://www.alsite.com.br/prime/faleconosco.html

4

1 回答 1

3

好的，所以我在您的页面上玩了一点，我想我知道真正的问题在哪里：默认值。您正在为字段设置默认值，而 jQuery 验证将它们视为值（它无法知道不同）。这就是为什么它有时有效，有时无效（我能够在以非标准方式切换焦点时显示验证消息）。

我建议通过添加自定义验证方法来解决此问题：

$(document).ready(function(){
    ...
    $.validator.addMethod("defaultTitle", function(value, element) {
        return !($(element).val() === $(element).attr('title'));
    }, $.validator.messages.required);

    $("#form").validate({
        rules: {  
            nome: { required: true, defaultTitle: true, minlength: 2 }, 
            ...
        },  
        messages: {  
            nome: { required: 'Preencha o campo nome', defaultTitle: 'Preencha o campo nome', minlength: 'No mínimo 2 letras' }, 
            ...
        },  
        submitHandler: function( form ){
            ...
        }           
    });
    ...
});

您应该将此新defaultTitle规则应用于您正在为其设置默认值的字段（并且您不需要删除该novalidate属性）。

jQuery Validation 插件没有启动的另一个原因是您使用了button而不是submit：

<input type="button" />按钮不会提交表单 - 默认情况下它们不做任何事情。它们通常与 JavaScript 结合使用，作为 AJAX 应用程序的一部分。

<input type="submit">按钮将在用户单击它们时提交它们所在的表单，除非您使用 JavaScript 另有指定。

jQuery Validation 连接到标准提交事件，你应该像这样改变你的标记：

<div class="form_faleconosco">
    ...
    <form action="" id="form" class="feedback_form"  method="post">
        ...
        <input id="submit2" class="feedback_go" type="submit" value="Enviar Mensagem" name="submit"/>
    </form>
</div>
于 2013-07-12T13:13:41.997 回答