<form class="cmxform" id="myshowErrors" class="form" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">Tel</label>
      <input id="curl" type="tel" name="tel" required>
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
.form__input_error{
  
  border: 2px solid red;
}
$(document).ready(function () {
  $("form").validate({
    errorClass: "form__input_error",
    validClass: "form__input_success",
    // errorPlacement: function (error, element) {},
    rules: {
      // simple rule, converted to {required:true}
      name: "required",
      // compound rule
      minlength: 2,
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      name: "Сообщение для имени",
      email: {
        required: "Вы не указали почту",
        email: "Your email address must be in the format of name@domain.com"
      },
      tel: {
        required: "Сообщение для телефона",
      }
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js