Perl Web App Development Tutorial

Error message box when new creation or update fails

This is a sample error message box when new creation or update fails.

• jQuery required
• Implemented close button
• The color is red
• Top error message is fixed
• Display an error message on each part of the form
• Display at the top of the page instead of modal

First of all, it is assumed that the parameter items have been validated.

Error messages are stored in a hash reference called $errors when validation fails. You can check if there are any errors by using the keys function after dereferencing $errors.

# Error message
my $errors = {};

if ($self->req->methodeq'POST') {
  my $op = param ('op') //'';
  
  # registration process
  if ($op eq'register') {
    my $title = param ('title');
    my $price = param ('price');
    
    #Validation
    unless (length $title) {
      $errors->{title} ='Enter a title';
    }

    unless (length $price) {
      $errors->{price} ='Enter the price';
    }
    
    # What to do if validation is successful
    unless (keys%$errors) {
      
    }
  }
}

If an error occurs, display a message at the top indicating that it is an error.

<style>
  .error_message {
    padding: 3px 8px 25px 8px;
    background: #ffeeee;
    border: 1px solid #ddcccc;
    border-radius: 5px;
    color: # 663333;
    width: calc (100%-15px);
    margin: 10px auto;
  }
  .error_message_close {
    text-align: right;
  }
  .error_message_close_button {
    text-align: right;
    cursor: pointer;
    font-size: 18px;
  }
  .error_message_item {
    color: red;
  }
</style>

%if (keys%$errors) {
  <div class = "error_message">
    <div class = "error_message_close">
      <span class = "error_message_close_button" onclick = "$(this) .closest ('.error_message'). hide ()"> × </span>
    </div>
    <div class = "error_message_text">
      There is an error in the input item.
    </div>
  </div>
%}

Display an error message for each item on the form as well. Use the defined-or operator to display the error message if it was defined, otherwise leave it blank.

<form action = "<%= url_for%>" method = "POST">
  <div>
    <b> Title: </b>
    <%= text_field'title'%> <span class = "error_message_item"> <%= $errors->{title} //''%> </span>
  </div>
  <div>
    <b> Price: </b>
    <%= text_field'price'%> <span class = "error_message_item"> <%= $errors->{price} //''%> </span>
  </div>

  %= hidden_field op =>'register';
  <%= submit_button'New'%>
</form>