how to validate the minlength and maxlength of textarea?

Question

I want to validate the minlength and maxlength of textarea before submitting, can anyone tell me details?

<form id="contact-je" action="<?php echo JURI::current(); ?>" method="post">

  <div class="input">
      <label id="je_hide_message" for="message"><?php echo JText::_("$message"); ?></label>
      <textarea name="je_message" id="message" class="requiredField" rows="4"
                placeholder="<?php echo $message; ?>"><?php if (isset($_POST['je_message'])) {
              if (function_exists('stripslashes')) {
                  echo stripslashes($_POST['je_message']);
              } else {
                  echo $_POST['je_message'];
              }
          } ?></textarea>
      <?php if (!isset($_SESSION)) {
          if ($messageError != '') { ?><span
                  class="error"><?php echo $messageError; ?></span><?php }
      } ?>
  </div>
  <div class="input">
      <button name="submit" type="submit"
              class="je_button"><?php echo JText::_("$submit") ?></button>
      <input type="hidden" name="submitted" id="submitted" value="true"/>
  </div>
</form>
<?php } ?>
</div>

the script below my form: Is it possible to add some codes to SCRIPT to validate the texarea length? — zhang, Dec 03 '20 at 06:09
Does this answer your question? [textarea character limit](https://stackoverflow.com/questions/5533053/textarea-character-limit) — kmoser, Dec 03 '20 at 09:27

score 0 · Answer 1 · answered Dec 03 '20 at 09:18

0

If you are allowed to use the browser feature, you can just set minlength and maxlength attributes of <textarea>.

<form>
  <textarea minlength="5" maxlength="10"></textarea>
  <input type="submit">
</form>

answered Dec 03 '20 at 09:18

zmag

7,825
12
32
42

score 0 · Answer 2 · answered Dec 03 '20 at 09:48

I add following codes, but if enter more than 300characters, the form will still be submitted. I don't want to submit if the characters is over 300

// Validate error
                            $('form#contact-je').submit(function () {
                            $('form#contact-je .error').remove();
                            var hasError = false;
                            $('.requiredField').each(function () {
                                if ($.trim($(this).val()) == '') {
                                    var labelText = $(this).prev('label').text();
                                    $(this).parent().append('<span class="error">Pls enter ' + labelText + '!</span>');
                                    $(this).addClass('invalid');
                                    hasError = true;
                                } else if ($(this).hasClass('email')) {
                                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                                    if (!emailReg.test($.trim($(this).val()))) {
                                        var labelText = $(this).prev('label').text();
                                        $(this).parent().append('<span class="error">You\'ve entered an invalid ' + labelText + '!</span>');
                                        $(this).addClass('invalid');
                                        hasError = true;
                                    }
                                }
                            });

    //Limit message characters
    $('#message').keyup(function() {
    if ($(this).val().length > 300){
       $(this).parent().append('<span class="error">ffffff</span>');
                                        $(this).addClass('invalid');
                                        hasError = true;
    }
    
    });
                            if (!hasError) {
                                var formInput = $(this).serialize();
                                $.post($(this).attr('action'), formInput, function (data) {
                                    $('form#contact-je').slideUp("fast", function () {
                                        $(this).before('<span class="success"><strong>Thank you!</strong> We have received your email.<br />We will get back to you in 12 hours.<br />-- Pneuflex China</span>');
                                    });
                                });
                            }
                            return false;
                        });

how to validate the minlength and maxlength of textarea?

2 Answers2