Exercise 21: Validating Forms - jkneal/spring-angular-train GitHub Wiki

Goals

Learn how to create formatters. Learn how to validate forms and display errors.

Instructions

  1. In edu.train.shop, create a new formatter named 'CurrencyFormatter' that formats BigDecimal. For implementing the formatting, use the Java NumberFormat utility defined as follows:
  protected NumberFormat getNumberFormat(Locale locale) {
  DecimalFormat format = (DecimalFormat) NumberFormat.getCurrencyInstance(locale);
  format.setParseBigDecimal(true);
  format.setMaximumFractionDigits(2);
  format.setMinimumFractionDigits(2);
  format.setCurrency(Currency.getInstance("USD"));
  return format;
}

  1. Now register your new formatter (add as a bean)

  2. In src/main/resources/shop/index.html, within the products table, modify the price expression so that it uses the Spring conversion service

  3. In edu.train.product.Product, add the following field validations:

Field Validation
price not null
name min size of 1 and max size of 20
price max integer digits of 19 and max fractional digits of 2

  1. In src/main/resources, create a new file named 'ValidationMessages.properties'

  2. Now add the following custom validation messages (for the validations in step 3, make sure to specify the custom messages on the annotation):

Validation Message Key Message
not null error.required Value for {0} is required
size error.maxSize Value for {0} is not the correct length
digits error.maxDigits Value for {0} has more digits than the maximum allowed

  1. Now in edu.train.shop.ShopController, modify the method addProduct to take a second argument of type org.springframework.validation.BindingResult and named 'result'. Indicate that the product argument should be validated. Only save the product and redirect if there are no errors, otherwise return back to the add product view

  2. In `src/main/resources/templates/shop/add-product.html', add the CSS class 'error' to the inputs for fields 'name' and 'price' if those fields have errors

  3. Above the label for the name input field, if there are errors display all the error messages in a paragraph. Add the CSS class 'errors' to the paragraph tag

VERIFICATION

  1. Start the training application and go to the app home page

  2. Click on the link 'Ex 21 Formatter'. Verify all the prices in the products table are formatted as currencies (should have '$')

  3. Now go back to the menu and click on the link 'Ex 21 Validate'. Now click 'Add' without entering any data. Verify the product name and price fields are highlighted with a red border. Also verify the messages "Value for price is required" and "Value for name is not the correct length" display above the name field

  4. Now enter a value for the name field, and enter 19.998 for the price. Next click 'Add'. Verify the price field is highlighted, and the message "Value for price has more digits than the maximum allowed" displays

  5. Finally enter a name, and '19.99' for the price. Verify the product is added successfully and you are returned to the shop page