Jquery验证插件：无效的textarea没有错误消息

Question

我有这种联系表格，使用Jquery validation plugin做一些快速的用户友好的验证之前，表单数据发送到phpmailer脚本。

姓名和电子邮件字段按预期工作，但注释textarea不提供反馈，即使未满足“规则”中指定的参数（即required和minlength），也允许提交表单。不知道我错过了什么，并会欣赏从新鲜的眼睛看。

<form class="cForm" id="commentForm" method="post" action="sanitizeandvalidate.php"> 
    <div id="feedback"> 
    <span></span> 
    </div> 

    <label for="firstname">First Name</label> 
    <input id="firstname" name="firstname" type="text" placeholder=" . . ."> 
    <div id="fnameError"></div> 

    <label for="lastname">Last Name</label> 
    <input id="lastname" name="lastname" type="text" placeholder=" . . ."> 
    <div id="lnameError"></div> 

    <label id="lbl_email" for="email">Email</label> 
    <input id="email" name="email" type="email" placeholder=" . . ."> 
    <div id="emailError"></div> 




    <p><label for="comment">Comment</label></p>  
    <textarea id="comment" name="comment" rows=11 cols=60 placeholder=" Tell us whats on your mind."></textarea> 
    <div id="commentError"></div> 
    <input class="submit" type="submit" value="Submit"> 
    <span id="loading"></span> 

</form> 

$.validator.addMethod("lettersonly", function(value, element) { 
    return this.optional(element) || /^[a-z\-.,()'"\s]+$/i.test(value); 
}); 
$(function() { 
    //form submit success/failure message 
    var feedback = $('#feedback'), 
    feedbackDiv = feedback.find('span'), 
    //ID of loading.svg 
    loading = $('#loading'), 
    //ID of Div that contains the form 
    tailbar = $('#tailbar'); 


    function showFeedback(message, attr) { 
    feedbackDiv.text(message), 
     feedbackDiv.attr('class', attr); 
    feedbackDiv.delay(3000).fadeOut('slow'); 
    feedbackDiv.delay(3005).removeAttr('style'); 
    } 

    $("#commentForm").validate({ 
    debug: true, 
    rules: { 
     firstname: { 
     required: true, 
     lettersonly: true 
     }, 
     lastname: { 
     required: true, 
     lettersonly: true 
     }, 
     email: { 
     required: true, 
     email: true 
     }, 
     comment: { 
     required: true, 
     minlength: 10 
     } 
    }, 
    messages: { 
     firstname: { 
     required: ' First name is required', 
     lettersonly: 'Letters or punctuation only please' 
     }, 
     lastname: { 
     required: ' Last name is required', 
     lettersonly: ' Letters or punctuation only please' 
     }, 
     email: { 
     required: ' Please enter an email address', 
     email: ' Not a <em>valid</em> email address' 
     }, 
     comment: { 
     required: ' A comment is required', 
     minlength: ' Your comment must excede 10 characters' 
     }, 
    }, 
    errorPlacement: function(error, element) { 
     if (element.attr('name') == 'comment') 
     error.insertAfter('#commentError'); 
     else if (element.attr('name') == 'email') 
     error.insertAfter('#emailError'); 
     else if (element.attr('name') == 'lastname') 
     error.insertAfter('#lnameError'); 
     else if (element.attr('name') == 'firstname') 
     error.insertAfter('#fnameError'); 
    }, 
    submitHandler: function(form) { 
     var options = { 
     beforeSubmit: function() { 
      loading.show(); 
     }, 
     success: function() { 
      showFeedback('Thank you for your message, we will get back to you as soon as possible.', 'success'); 
      form.reset(); 
      loading.hide(); 
      tailbar.delay(4000).slideToggle('slow'); 
     }, 
     error: function() { 
      showFeedback('Sorry there was an unexpected error and your message was not sent. Please try again later.', 'failure'); 
      loading.hide(); 
      form.reset(); 
     } 
     }; 
     $(form).ajaxSubmit(options); 
    }, 
    invalidHandler: function() { 
     showFeedback('One or more of the fields are invalid.', 'failure'); 
    } 
    }); 
}); 

Answer 1

道歉，我已经意识到我的错误。这段代码能够正常工作（我必须在jsfiddle上错过了一些没有看到它的东西）。我的问题在于我在我的项目中将我与它的父项分开。

Answer 2

您不必为文本区域验证方式不同。我猜错误文本确实存在于DOM中。首先，检查它是否存在于DOM中。它可能隐藏在提交按钮的位置。这与您提供的代码完全相同。尝试在这里运行它。它将按预期

// Code goes here 
 

 
$.validator.addMethod("lettersonly", function(value, element) { 
 
    return this.optional(element) || /^[a-z\-.,()'"\s]+$/i.test(value); 
 
}); 
 
$(function() { 
 
    //form submit success/failure message 
 
    var feedback = $('#feedback'), 
 
    feedbackDiv = feedback.find('span'), 
 
    //ID of loading.svg 
 
    loading = $('#loading'), 
 
    //ID of Div that contains the form 
 
    tailbar = $('#tailbar'); 
 

 

 
    function showFeedback(message, attr) { 
 
    feedbackDiv.text(message), 
 
     feedbackDiv.attr('class', attr); 
 
    feedbackDiv.delay(3000).fadeOut('slow'); 
 
    feedbackDiv.delay(3005).removeAttr('style'); 
 
    } 
 

 
    $("#commentForm").validate({ 
 
    debug: true, 
 
    rules: { 
 
     firstname: { 
 
     required: true, 
 
     lettersonly: true 
 
     }, 
 
     lastname: { 
 
     required: true, 
 
     lettersonly: true 
 
     }, 
 
     email: { 
 
     required: true, 
 
     email: true 
 
     }, 
 
     comment: { 
 
     required: true, 
 
     minlength: 10 
 
     } 
 
    }, 
 
    messages: { 
 
     firstname: { 
 
     required: ' First name is required', 
 
     lettersonly: 'Letters or punctuation only please' 
 
     }, 
 
     lastname: { 
 
     required: ' Last name is required', 
 
     lettersonly: ' Letters or punctuation only please' 
 
     }, 
 
     email: { 
 
     required: ' Please enter an email address', 
 
     email: ' Not a <em>valid</em> email address' 
 
     }, 
 
     comment: { 
 
     required: ' A comment is required', 
 
     minlength: ' Your comment must excede 10 characters' 
 
     }, 
 
    }, 
 
    errorPlacement: function(error, element) { 
 
     if (element.attr('name') == 'comment') 
 
     error.insertAfter('#commentError'); 
 
     else if (element.attr('name') == 'email') 
 
     error.insertAfter('#emailError'); 
 
     else if (element.attr('name') == 'lastname') 
 
     error.insertAfter('#lnameError'); 
 
     else if (element.attr('name') == 'firstname') 
 
     error.insertAfter('#fnameError'); 
 
    }, 
 
    submitHandler: function(form) { 
 
     var options = { 
 
     beforeSubmit: function() { 
 
      loading.show(); 
 
     }, 
 
     success: function() { 
 
      showFeedback('Thank you for your message, we will get back to you as soon as possible.', 'success'); 
 
      form.reset(); 
 
      loading.hide(); 
 
      tailbar.delay(4000).slideToggle('slow'); 
 
     }, 
 
     error: function() { 
 
      showFeedback('Sorry there was an unexpected error and your message was not sent. Please try again later.', 'failure'); 
 
      loading.hide(); 
 
      form.reset(); 
 
     } 
 
     }; 
 
     $(form).ajaxSubmit(options); 
 
    }, 
 
    invalidHandler: function() { 
 
     showFeedback('One or more of the fields are invalid.', 'failure'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<body> 
 
    <form class="cForm" id="commentForm" method="post" action="sanitizeandvalidate.php"> 
 
    <div id="feedback"> 
 
     <span></span> 
 
    </div> 
 
    <label for="firstname">First Name</label> 
 
    <input id="firstname" name="firstname" placeholder=" . . ." type="text" /> 
 
    <div id="fnameError"></div> 
 
    <label for="lastname">Last Name</label> 
 
    <input id="lastname" name="lastname" placeholder=" . . ." type="text" /> 
 
    <div id="lnameError"></div> 
 
    <label id="lbl_email" for="email">Email</label> 
 
    <input id="email" name="email" placeholder=" . . ." type="email" /> 
 
    <div id="emailError"></div> 
 
    <p> 
 
     <label for="comment">Comment</label> 
 
    </p> 
 
    <textarea id="comment" name="comment" rows="11" cols="60" placeholder=" Tell us whats on your mind."></textarea> 
 
    <div id="commentError"></div> 
 
    <input class="submit" value="Submit" type="submit" /> 
 
    <span id="loading"></span> 
 
    </form> 
 
</body>