Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – JustValidateJs Is Accepting Empty Form Even Though It's Displaying The Error Message

I’m trying to use the JustValidateJs library to prevent the user from submitting an empty form and display an error message when the user hits the character limit. However, for some reason, the form is accepting empty submissions and also submissions of 500 characters (JustValidate’s limit is 499). Despite this, the error message is still displaying.

Here’s the form:

<form action="addComment.php" method="post" id="add_comment_form" class="w-50">

  <div>
    <label for="comment_content">Comment as <?php echo $commentWriter ?></label>
    <textarea id="comment_content" name="comment_content" class="form-control" placeholder="Enter comment" maxlength="500" rows="5"></textarea>
  </div>

  <div class="row justify-content-end mt-3">
    <div class="col-auto">
      <button type="submit" class="btn btn-primary" id="addCommentBtn">Save changes</button>
    </div>
  </div>
</form>

JustValidate code:

const validateComment = new JustValidate('#add_comment_form');

validateComment
  .addField('#comment_content', [
    {
      rule: 'required',
      errorMessage: 'Field cannot be empty',
    },
    {
      rule: 'maxLength',
      value: 499,
      errorMessage: 'Comment cannot exceed 500 characters',
    }
  ]).onSuccess((event)=> {
    event.preventDefault();
    $('#add_comment_form').submit();
  });

I tried using input of type "text" but that didn’t help

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to fix the problem by ensuring that the PHP script checks if the required fields are not empty before performing the database insertion

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST['comment_content'])) {
    $response['success'] = false;
    $response['message'] = "Comment content cannot be empty";

  2. 0

    I replicated the scenario and works fine, maybe you need to check your code because this works as expected: the code didn’t accept empty submissions and only accepted strings from 1 to 499

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form action="addComment.php" method="post" id="add_comment_form" class="w-50">

        <div>
          <label for="comment_content">Comment as comment writer</label>
          <br>
          <textarea id="comment_content" name="comment_content" class="form-control" placeholder="Enter comment" maxlength="500" rows="5"></textarea>
        </div>
        
        <div class="row justify-content-end mt-3">
          <div class="col-auto">
            <button type="submit" class="btn btn-primary" id="addCommentBtn">Save changes</button>
          </div>
        </div>
      </form>
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<script>
    const validateComment = new JustValidate('#add_comment_form');

validateComment
  .addField('#comment_content', [
    {
      rule: 'required',
      errorMessage: 'Field cannot be empty',
    },
    {
      rule: 'maxLength',
      value: 499,
      errorMessage: 'Comment cannot exceed 500 characters',
    }
  ]).onSuccess((event)=> {
    event.preventDefault();
    $('#add_comment_form').submit();
  });
</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search