2017-05-07 2 views
-1

フォームデータがphpmailerスクリプトに送信される前に、Jquery validation pluginを使用するこの連絡フォームを使用して簡単にユーザーフレンドリーな検証を行います。Jquery Validate Plugin:無効なテキストエリアからのエラーメッセージなし

名前と電子メールフィールドは期待通りに機能しますが、コメントテキストエリアはフィードバックを提供せず、「ルール」で指定されたパラメータが満たされていなくてもフォームを送信できます(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'); 
    } 
    }); 
}); 
+0

私の考えは、