x
1
2
3
4
5
6
7
8
<div data-controller="vuejs-forms" data-values="{"user":{"id":null,"first_name":"J","last_name":null,"phone":null,"email":null,"amount":null,"website":null,"country":null,"birth_date":null,"appointment_at":null,"code_snippet":null,"bio":null,"preferred_time":null,"newsletter":false,"marketing_emails":null,"terms_accepted":false,"privacy_policy_accepted":false,"interests":null,"notification_preferences":[],"errors":{"_is_valid":false,"first_name":"First name is too short (minimum is 2 characters)","country":"Country can't be blank","birth_date":"Birth date can't be blank","appointment_at":"Appointment at can't be blank","code_snippet":"Code snippet can't be blank","phone":"Phone can't be blank","bio":"Bio can't be blank","preferred_time":"Preferred time can't be blank","newsletter":"Newsletter must be accepted to receive updates","terms_accepted":"Terms accepted must be accepted to continue","notification_preferences":"Notification preferences can't be blank"},"warnings":{"_is_valid":false,"privacy_policy_accepted":"Privacy policy accepted We recommend reviewing our privacy policy"},"suggested_values":{"first_name":"Oscar Botyglot","country":"france","birth_date":"2026-03-28","appointment_at":"2026-03-29T09:55:34.633Z","code_snippet":"# Sample Ruby code\nclass HelloWorld\n def greet(name)\n puts \"Hello, #{name}!\"\n end\nend\n\nhello = HelloWorld.new\nhello.greet(\"World\")\n","phone":"+33 1 23 45 67 89","amount":1234.56,"bio":"Passionate software developer with expertise in Ruby on Rails and Vue.js. Always eager to learn new technologies and share knowledge with the community.","preferred_time":"2026-03-28T14:30:00.000Z","newsletter":true,"marketing_emails":true,"terms_accepted":true,"privacy_policy_accepted":true,"interests":["ruby","javascript"],"notification_preferences":["email","push"]}}}" data-validation-url="/users"><botyglot-form id="new_user_form" class="form user-form" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="akZiIjcpriU4TS1aj2avnARNa7-wj7cFYctuvt7jNiuSDqEkNAYBcDrYTE5iwlDEky3R7lXeaCd5MvlDuM_oFg" autocomplete="off" /> <div class="field_with_errors"><botyglot-input suggest_value="false" numeric_format="false" display_error="false" placeholder="Enter your first name" type="text" value="J" name="user[first_name]" id="user_first_name" ></botyglot-input></div> <div class="field_with_errors"><botyglot-select include_blank="true" suggest_value="false" display_error="false" choices="[{"id":"france","display_name":"France"},{"id":"belgium","display_name":"Belgium"},{"id":"switzerland","display_name":"Switzerland"},{"id":"canada","display_name":"Canada"},{"id":"other","display_name":"Other"}]" class="mt-2" name="user[country]" id="user_country"></botyglot-select></div> <div class="mt-5 px-3 py-1.5 bg-gray-50 rounded-md border border-gray-200"> <span class="text-sm font-medium text-gray-700">Errors:</span> <botyglot-errors-placeholder names="["user[first_name]","user[country]"]" force="false"></botyglot-errors-placeholder> </div></botyglot-form></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%- url = polymorphic_path(['', User], action: :create) -%><%- countries = [ ["France", "france"], ["Belgium", "belgium"], ["Switzerland", "switzerland"], ["Canada", "canada"], ["Other", "other"]] -%><%= vuejs_form_with(model: user, url: url, local: true, scope: :user, builder: default_form_builder) do |form| %> <%= render Elevate::VueJs::FieldComponent.new(form: form, field_name: :first_name, placeholder: "Enter your first name", display_error: false) %> <%= render Elevate::VueJs::SelectComponent.new( form: form, field_name: :country, choices: countries, display_error: false, input_html_options: { class: "mt-2" } ) %> <div class="mt-5 px-3 py-1.5 bg-gray-50 rounded-md border border-gray-200"> <span class="text-sm font-medium text-gray-700">Errors:</span> <%= render Elevate::VueJs::ErrorsComponent.new( form: form, fields: [:first_name, :country] ) %> </div><% end %>Errors for multiple fields at once
No params configured.
No assets to display.