Question

我的<form>获取了属性novalidate，这使他无法通过jQuery.Validate验证。我使用的是版本1.9和1.11，都会产生这些错误。

我没有使用HTM5验证...

我的网页代码：

SCRIPT：

<!-- 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>

FORM标记：

<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>

LIVE VERSION：http://www.alsite.com.br/prime/faleconosco.html

Answer 1

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

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

$(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应用程序的一部分。

除非您使用JavaScript另行指定，否则

<input type="submit">按钮将提交用户点击它们时所使用的表单。

jQuery验证与标准提交事件挂钩，您应该像这样更改标记：

<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>

为什么我的<form>获取属性“novalidate”？</form>

1 个答案: