Question

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

名称和电子邮件字段按预期工作，但注释文本区域不提供反馈，即使未满足“规则”中指定的参数（即必需和最小长度），也允许提交表单。不确定我错过了什么，并欣赏新眼睛的样子。

  <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

您无需为文本区域验证不同的方式。我猜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>

Answer 2

道歉我意识到自己的错误。这段代码工作正常（我必须错过jsfiddle上的一些东西，因为我们首先没有看到它。）我的问题在于我在我的项目中我将它与它的父母分开了。

Jquery Validate插件：来自无效textarea

2 个答案: