How to Build Dynamic Forms in Laravel

Get a base understanding of how to build complex, dynamic forms in Laravel. By "Dynamic Form" we mean a form where fields and blocks of fields get added using JavaScript. See the example dynamic form here. You will be shown how to not only build the form but also how to validate it with complex validation rules.

Features of the example form

  • You can add as many "Addtional Languages" and "Jobs" as you want until you reach the 'max_input_vars' limit set in the php.ini. This is a limit for how many form fields can be submitted to the server and is usually set to the default of 1,000. Changing this limit in the php.ini is quite straight forward.
  • Each dynamically added job has within it a dynamic section "Additional Languages Used". You can add and remove "Additional Languages Used" as you like.
  • Sophisticated validation rules are applied to the dynamically added experience (Jobs) section Example:
    - there must be entries in either the "Languages Used" or "Additional Languages Used" section or both.
    - "end date" must be on or after the "start date".
    "Full Name" must be unique for all the people you have submitted.
  • The form is multi-lingual. There is a button to switch between the English and German language version. Field labels, error messages and JavaScript "confirm" messages all appear in the appropriate language.
    NOTE about dates fields. The HTML5 date element <input type="date"> is being used to input dates. Most browsers format the displayed date using the browsers languages settings. For this reason when you switch language you will not see the date format change. The submitted date is always in the same format yyyy-mm-dd.

Learning

Play around with the example form and get a feel for how it behaves. Test what errors messages you can get out of it. It is OK to save data as it will be deleted after your session is over.

Get an overview of some of the basic techniques used in building the form and see detailed instructions here. You can find the entire code for this website at GitHub