test.txt

<section id="val">  
    
<script type="text/javascript">
// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='add_staff']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      username: "&nbsp;required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "&nbsp;Please enter a valid username",
      password: {
        required: "&nbsp;Please provide a password",
        minlength: "&nbsp;Your password must be at least 5 characters long"
      },
      email: "&nbsp;Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>   
<style type="text/css">
form .error {
color: #ff0000;
}
    
</style>
</section>

<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/jquery.validate.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="../assets/css/bootstrap-5.1.3-dist/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="../assets/css/mystyle.css">