帶有jquery validate和ajax post表單的驗證表單空白textarea中的錯誤

Question

我有一個春季項目，並有一個任務要對特定的系統設計進行評論。 該頁面的形式如下：

<form id="formularioCadastroComentario" role="form" method="POST" class="form-horizontal">
    <input type="hidden" id="projeto" name="projeto" value="${projeto.id}"> <input type="hidden" id="usuario" name="usuario" value="${usuario.id}">
    <input type="hidden" id="usuario_nome" name="usuario" value="${usuario.nome}"> <label class="control-label"for="textocomentarioInput"><h3>Novo Comentário</h3></label>
            <div class="form-group">
                <div class="input-group">
                    <textarea id="textocomentarioInput" name="texto" class="form-control" placeholder="Comentário" required="required"></textarea>
                </div>
            </div>
    <br> <input name="botao" id="botaoEnviarComentario" class="btn btn-primary" value="Enviar" /> 
    <a href="<c:url value="/projeto/index"></c:url>" class="btn btn-default">Voltar</a>
</form>

在我的jsp頁面中，具有文件funcoes.js的腳本鏈接，而funcoes.js具有ajax函數，用於在提交表單后插入注釋：

$("#formularioCadastroComentario").submit(function(e) {
    var idProjeto = $('#projeto').val();
    var idUsuario = $('#usuario').val();
    var nomeUsuario = $('#usuario_nome').val();
    var cabecalho = "Comentários do Projeto";
    var textoComentario = $('#textocomentarioInput').val();
    var data = new Date();
    var dataFormatada = ("0" + data.getDate()).substr(-2)+ "-" + ("0" +(data.getMonth()+ 1)).substr(-2)+ "-"+ data.getFullYear()+ " "+ ('0' + data.getHours()).slice(-2)+ ":"+ ('0' + data.getMinutes()).slice(-2);
    $.ajax({
     type : "POST",
     data : {
        idProjeto : idProjeto,
        idUsuario : idUsuario,
        texto : textoComentario
        },
     url : "/gpa-pesquisa/comentario/comentarProjeto",
     dataType : "html",
     success : function() {
        $('#comentarioList').prepend(
            '<li class="well">'
            + '<div class="nome_usuario">'
            + nomeUsuario+ '</div>'
            + '<div class="corpo_texto">'
            + textoComentario + '</div>'
            + '<div class="formatacao_data">'
            + dataFormatada + '</div>'
            + '</li>');
        $("#headComentarios").show();
        }
    });
 $("#formularioCadastroComentario")[0].reset();
});

我的JSP頁面在關閉html標記正文之后有jquery驗證代碼：

<script type="text/javascript">
$(document).ready(function($) {
    $("#formularioCadastroComentario").validate({
        rules : {
            texto : {
                minlength : 5,
                required : true,
            }
        },
        messages : {
            texto : {
                required : "Campo obrigatório",
                minlength : "O campo deve ter no mínimo 5 caracteres"
            }
        },
        highlight : function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight : function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement : 'span',
        errorClass : 'help-block',
        errorPlacement : function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});

問題是，當我嘗試發布5個字母以下或空白jquery的新評論時，會顯示該消息，但是如果我提交表單代碼，則會注冊一個新評論。 我想知道如何做才能驗證jquery ajax在發表評論之前不起作用用戶注冊少於5個字母或空格。 謝謝，

Answer 1

您應該將ajax代碼放在submitHandler .validate()方法的submitHandler回調函數中， 而不是放在自己的.submit()處理程序中。

$(document).ready(function($) {
    $("#formularioCadastroComentario").validate({
        submitHandler: function(form) {
            var idProjeto = $('#projeto').val();
            // the rest of your ajax function...
            ....
            return false;  // block the default submit
        },
        rules : {
            texto : {
                minlength : 5,
                required : true,
            }
        },
        ......

說明文件 ：

submitHandler ：當表單有效時用於處理實際提交的回調。 獲取表單作為唯一參數。 替換默認的提交。 驗證后通過Ajax提交表單的正確位置 。

---

順便說一句，您不需要在兩個地方聲明規則。 由於您已經在.validate()方法中指定了required: true ，因此在相應的元素上不需要required="required"屬性。