Hello
I have made two input fields.
What is want is to show “Fill Out this Field” like below in case it left empty.
{% if product.title contains ‘oh Wanted Studio 3D Customized Car Plate Keychain’ %}
<p class="line-item-property__field "
Hi @amazezones ,
As your requirement and the code that you supply:
To add a “Please Fill Out This Field” tooltip in case the input fields are left empty, you can use the HTML title attribute for the input elements. This attribute allows you to specify text that will be displayed as a tooltip when the user hovers over the input field.
Here’s an updated version of your code with the added tooltip:
{% if product.title contains 'oh Wanted Studio 3D Customized Car Plate Keychain' %}
<!-- Edit Add customization box for keychain-->
<div class="wrapline">
<p class="line-item-property__field "
<!--<label for="monogram1" class="label-required">Enter Plate Number (Max 5 Digits)</label>-->
<div class="row{% if section.settings.layout == '1' %} justify-content-center justify-content-md-start{% endif %}">
<input class="ep_inline_block plate_number_az" type="text" placeholder="Enter Plate Number (Max 5 Digits)" id="monogram1" style="width:285px; max-width:100%;" name="properties[Plate Number]" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{1}" maxlength="5" required title="Please Fill Out This Field">
</div>
<!--<label for="monogram">Enter Code</label>-->
<div class="row{% if section.settings.layout == '1' %} justify-content-center justify-content-md-start{% endif %} mb-20">
<input class="ep_inline_block code_number_az" type="text" placeholder="Enter Code" id="monogram" style="width:130px; max-width:100%;" name="properties[Code]" oninput="this.value = this.value.replace(/[^0-9,A-Z,a-z.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{1}" maxlength="2" required title="Please Fill Out This Field">
</div>
</div>
In this code, I added the title attribute to both input elements, providing the text “Please Fill Out This Field.” This text will be displayed as a tooltip when the user leaves the field empty and tries to submit the form.
Hope it helps!
Have a nice day! ^^
its not working… without filling still I can add product to the bag…
As your update requirement, your input fields must be in a form, and have a submit event.
Because the code you provided is only a small part of the entire liquid file of the theme store, I can only give you an example to visualize the solution, but cannot make the correction absolutely accurate.
Below is an orientation on how to do it, you can do the same.
Good luck.
{% if product.title contains 'oh Wanted Studio 3D Customized Car Plate Keychain' %}
<div class="wrapline">
<form onsubmit="return validateForm()">
<div class="row{% if section.settings.layout == '1' %} justify-content-center justify-content-md-start{% endif %}">
<input class="ep_inline_block plate_number_az" type="text" placeholder="Enter Plate Number (Max 5 Digits)" id="monogram1" style="width:285px; max-width:100%;" name="properties[Plate Number]" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{1}" maxlength="5" required data-tooltip="" title="">
</div>
<div class="row{% if section.settings.layout == '1' %} justify-content-center justify-content-md-start{% endif %} mb-20">
<input class="ep_inline_block code_number_az" type="text" placeholder="Enter Code" id="monogram" style="width:130px; max-width:100%;" name="properties[Code]" oninput="this.value = this.value.replace(/[^0-9,A-Z,a-z.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="\d{1}" maxlength="2" required data-tooltip="" title="">
</div>
<button type="submit">Add to Bag</button>
</form>
</div>
<script>
function validateForm() {
var plateNumber = document.getElementById("monogram1").value;
var code = document.getElementById("monogram").value;
if (plateNumber === "") {
setTooltipMessage("monogram1", "Fill out this field");
return false;
}
if (code === "") {
setTooltipMessage("monogram", "Fill out this field");
return false;
}
// Add additional validation logic if needed
return true;
}
function setTooltipMessage(elementId, message) {
var inputElement = document.getElementById(elementId);
inputElement.setAttribute("title", message);
inputElement.dataset.tooltip = true;
}
</script>
{% endif %}
In this example, I added a form element around your input fields and a submit button. The onsubmit attribute of the form calls the “validateForm” function, which checks if the required fields are filled. If any of the fields are empty, it call " setTooltipMessage " function that sets the “title” attribute and a custom “data-tooltip” attribute on the input elements. and returns false, preventing the form from being submitted. Otherwise, it returns true, allowing the form to be submitted.
hey BSS Commerce, thx of the reply… the code is not working properly… first if I enter more than 1 digit I get notification that format is not matching. 2- add to cat button is different than the page design 3- after clicking add to cat noting is added to cart
this is full code
{%- if template_layout == ‘5’ -%}
{%- assign centered = true -%}
{%- endif -%}
{%- unless is_quick_view -%}
{%- assign change_history = true -%}
{%- endunless -%}
{% capture variants_select_html %}
{% include 'product-get-variants' with product: product current_variant: current_variant show_custom_options: settings.product_show_custom_options, product_form_id: product_form_id %}
{% endcapture %}
{%- if settings.product_info_show_label_hot or settings.product_info_show_label_new or settings.product_info_show_label_sale or settings.product_info_show_label_in_stock or settings.product_info_show_label_pre_order or settings.product_info_show_label_out_stock -%}
{%- when 'delivery_countdown' -%}
{%- endif -%}
{%- when 'notes' -%}
{%- if settings.product_info_show_label_hot -%}
{% include 'product-get-label-hot' %}
{%- endif -%}
{%- if settings.product_info_show_label_new -%}
{% include 'product-get-label-new' %}
{%- endif -%}
{%- if settings.product_info_show_label_sale -%}
{% include 'product-get-label-sale' %}
{%- endif -%}
{%- if settings.product_info_show_label_in_stock -%}
{% include 'product-get-label-in-stock' %}
{%- endif -%}
{%- if settings.product_info_show_label_pre_order -%}
{% include 'product-get-label-pre-order' %}
{%- endif -%}
{%- if settings.product_info_show_label_out_stock -%}
{% include 'product-get-label-out-stock' %}
{%- endif -%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'collections' -%}
{%- if product.collections.size > 0 -%}
{% render 'product-get-collections' with product: product %}
{%- endif -%}
{%- when 'title' -%}
{%- if is_quick_view -%}
{{ title }}
{%- else -%}
{%- when 'reviews' -%}
{%- if settings.reviews_type != 'disable' -%}
{{ title }}
{%- endif -%}
{%- if settings.reviews_type == 'default' -%}
{%- endif -%}
{%- when 'details' -%}
{%- if settings.product_info_show_sku or settings.product_info_show_barcode or settings.product_info_show_availability or settings.product_info_show_type or settings.product_info_show_vendor -%}
{% render 'product-get-review' with product: product type: 2 centered: centered hide_counter: settings.product_info_hide_reviews_counter hide_mobile_counter: false %}
{%- elsif settings.reviews_type == 'growave' and settings.app_growave_enable == true -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-profile' %}{% endcapture %}
{%- unless the_snippet_review_avg contains 'Liquid error' or product.metafields.ssw['review'].avg == 0 -%}
{{ the_snippet_review_avg }}
{%- endunless -%}
{%- elsif settings.reviews_type == ‘loox’ and product.metafields.loox.num_reviews -%}
{%- endif -%}
{%- if settings.product_info_show_sku -%}
{%- endif -%}
{%- if settings.product_info_show_barcode -%}
{%- endif -%}
{%- if settings.product_info_show_availability -%}
{%- endif -%}
{%- if settings.product_info_show_vendor -%}
{%- endif -%}
{%- endif -%}
{%- when 'price' -%}
{{ 'products.product.sku' | t }}: {{ sku }}
{{ 'products.product.barcode' | t }}: {{ barcode }}
{%- if quantity == 1 -%}
{%- capture item -%}{{ 'layout.cart.items_count.one' | t }}{%- endcapture -%}
{%- else -%}
{%- capture item -%}{{ 'layout.cart.items_count.other' | t }}{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- if settings.product_info_show_type -%}
{{ 'products.product.availability' | t }}: {% if available %}{% if quantity > 0 %}{{ 'products.product.availability_value_in_stock' | t: count: quantity, item: item }}{% else %}{{ 'products.product.availability_value_in_stock_without_counter' | t }}{% endif %}{% else %}{{ 'products.product.availability_value_out_stock' | t }}{% endif %}
{{ 'products.product.type' | t }}: {{ type }}
{{ 'products.product.vendor' | t }}: {{ vendor }}
{% include 'product-get-price' %}
{%- if settings.product_info_show_sale_details -%}
{%- if compare_at_price > price -%} {%- assign price_save = compare_at_price | minus: price -%} {%- assign price_save_money = price_save | money -%} {%- assign price_save_procent = price | times: 100 | divided_by: compare_at_price | minus: 100 | times: -1 -%} {{ 'products.product.price_sale_details_html' | t: price: price_save_money, procent: price_save_procent }} {%- endif -%}
{%- endif -%} {%- if settings.product_info_show_taxes -%} {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{% endif %}
{% if shop.shipping_policy.body != blank %}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if settings.product_info_payment_terms -%}
{%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
{%- form 'product',
product,
id: product_form_installment_id,
class: 'installment m-0',
data-js-product-form: ''
-%}
{% capture payment_terms_html %}{{ form | payment_terms }}{% endcapture %}
{%- if payment_terms_html.size > 0 -%}
{{ payment_terms_html }}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- if settings.app_klarna_enable -%}
{%- assign klarna_app_blocks = section.blocks | where: ‘type’, ‘klarna_app’ -%}
{%- for block in klarna_app_blocks -%}
{%- when ‘icon_with_text’ -%}
{%- for i in (0..6) -%}
{%- assign icon_svg_property = 'icon_svg_' | append: forloop.index -%}
{%- assign icon_image_property = 'icon_image_' | append: forloop.index -%}
{%- assign icon = blank -%}
{%- if block.settings[icon_image_property] != blank -%}
{% capture img_size %}{% if block.settings.style == 'inline' %}24x{% else %}40x{% endif %}{% endcapture %}
{% capture icon %}
![{{ block.settings[icon_image_property].alt | default: shop.name | escape }}]()
{% endcapture %}
{%- elsif block.settings[icon_svg_property] != blank -%}
{% capture icon_svg_snippet %}icon-{{ block.settings[icon_svg_property] }}{% endcapture %}
{% capture icon %}
{% include icon_svg_snippet %}
{% endcapture %}
{%- if icon contains 'Liquid error' -%}
{%- assign icon = blank -%}
{%- endif -%}
{%- endif -%}
{%- assign text_property = 'text_' | append: forloop.index -%}
{%- if icon != blank or block.settings[text_property] != blank -%}
{%- when 'description' -%}
{%- if metafields.description.content != blank or description != blank or block.settings.content != blank -%}
{%- if icon != blank -%}
{{ icon }}
{%- endif -%}
{%- if block.settings[text_property] != blank -%}
{%- endif -%}
{%- endfor -%}
{{ block.settings[text_property] }}
{%- endif -%}
{%- if block.settings.title != blank -%}
{%- endif -%}
{%- when 'text' -%}
{%- if block.settings.content != blank -%}
{{ block.settings.title }}
{%- endif -%}
{{ block.settings.content | default: metafields.description.content | default: description }}
{{ block.settings.content }}
{%- endif -%}
{%- when 'countdown' -%}
{%- if countdown_date -%}
{% capture countdown_title %}{{ 'products.product.countdown.title' | t }}{% endcapture %}
{% render 'product-get-countdown' with countdown_date: countdown_date, countdown_type: 2, countdown_title: countdown_title, centered: centered %}
{%- endif -%}
{%- when 'stock_countdown' -%}
{% capture quantity_html %}{{ quantity }}{% endcapture %}
{{ 'products.product.stock_countdown_html' | t: quantity: quantity_html }}
{%- if settings.product_info_show_stock_countdown_range -%}
{%- assign countdown_range_quotient = settings.product_stock_countdown_min | times: 1.0 | divided_by: 100 -%}
{%- assign countdown_range_procent = quantity | divided_by: countdown_range_quotient -%}
{%- endif -%}
0 %} style="width: {{ countdown_range_procent }}%;"{% endif %}>
{% capture delivery_countdown_counter_html %}0 {{ 'products.product.delivery_countdown.hours' | t | downcase }} 0 {{ 'products.product.delivery_countdown.minutes' | t | downcase }}{% endcapture %}
{% capture delivery_countdown_delivery_html %} /{{ "now" | date: "%m" }}/{{ "now" | date: "%Y" }}{% endcapture %}
{% render 'icon-theme-116' %} {{ 'products.product.delivery_countdown_html' | t: counter: delivery_countdown_counter_html, delivery: delivery_countdown_delivery_html }}
{%- when ‘visitors’ -%}
{%- assign visitors_random_diff = settings.product_visitors_max | minus: settings.product_visitors_min -%}
{%- assign visitors_random = "now" | date: "%N" | modulo: visitors_random_diff | plus: settings.product_visitors_min -%}
{% capture visitors_counter_html %}{{ visitors_random }}{% endcapture %}
{{ 'products.product.visitors_html' | t: counter: visitors_counter_html }}
{%- when ‘border’ -%}
{%- when 'options' -%} {%- if settings.product_show_custom_options -%} {%- unless product.has_only_default_variant -%}
{%- unless is_quick_view -%}
{%- assign trigger_id = 'footbar' -%}
{%- endunless -%}
{% include 'product-get-options' with options_type: 2 centered: centered options_show_title: true change_history: change_history %}
{%- endunless -%}
{{ variants_select_html }}
{%- else -%}
{{ variants_select_html | remove: 'd-none' }}
{%- endif -%}
{%- assign variants_select_html = blank -%}
{%- when 'popups' -%}
{%- assign show_size_guide = settings.product_info_show_size_guide -%}
{%- assign show_delivery_return = settings.product_info_show_delivery_return -%}
{%- assign show_message = settings.product_info_show_message -%}
{%- if product.metafields.sizeguide.html == 'hide' -%}
{%- assign show_size_guide = false -%}
{%- endif -%}
{%- if show_size_guide or show_delivery_return or show_message -%}
{%- if show_size_guide -%}
{%- endif -%}
{%- if show_delivery_return -%}
{%- endif -%}
{%- if show_message -%}
{%- endif -%}
{% if product_popup_buttons_show_icon %}{% include 'icon-theme-091' %} {% endif %}{{ 'products.product.size_guide' | t }}
{% if product_popup_buttons_show_icon %}{% include 'icon-theme-135' %} {% endif %}{{ 'products.product.delivery_return' | t }}
{% if product_popup_buttons_show_icon %}{% include 'icon-theme-133' %} {% endif %}{{ 'products.product.message' | t }}
{{ 'products.product.notes_label' | t }}
{%- when 'buttons_quantity' -%}
{% if product.title contains ‘oh Wanted Studio 3D Customized Car Plate Keychain’ %}
{% capture cart_icon_name %}{{ settings.cart_icon | default: ‘icon-theme-109’ }}{% endcapture %}
{%- if settings.product_info_button_layout != ‘3’ and settings.product_info_show_quantity-%}
{%- unless is_quick_view -%}
{%- assign quantity_connect = 'footbar' -%}
{%- endunless -%}
{% render 'product-get-quantity' with quantity_show_title: true quantity_connect: quantity_connect, product_form_id: product_form_id %}
{%- endif -%}
{%- assign has_selling_plan = false -%}
{% capture selling_plan_html %}
{% for variant in product.variants %}
{% for allocation in variant.selling_plan_allocations %}
{%- assign has_selling_plan = true -%}
{{ allocation.selling_plan.name }}
{% endfor %}
{% endfor %}
{% endcapture %}
{% include 'product-page-get-buttons-3d-car-plate-keychain' with product_form_id: product_form_id %}
{%- when 'free_shipping' -%}
{%- if settings.cart_show_free_shipping -%}
{% render 'free-shipping' with mobile_centered: true centered: centered %}
{%- endif -%}
{%- when 'pickup_availability' -%}
{% include 'product-page-get-pickup-available' %}
{%- when 'complementary_products' -%}
{%- assign global_product_form_id = product_form_id -%}
{% include 'product-page-get-complementary-products' %}
{%- assign product_form_id = global_product_form_id -%}
{%- when 'payments' -%}
{{ 'products.product.payments' | t }}:
{% include 'payments' with payments_sequence: settings.payment_sequence_product %}
{%- when 'social_share_buttons' -%}
{{ 'products.product.share' | t }}
{% render 'social-share' share_type: settings.product_info_social_share_buttons_type share_title: title share_permalink: url share_image: product.featured_media %}
{%- endcase -%}
{%- endfor -%}
{%- if is_quick_view -%}
{%- if settings.product_quick_view_show_full_details -%}
{%- endif -%}
{%- endif -%}
{%- if variants_select_html != blank -%}
{{ variants_select_html }}
{%- endif -%}
{%- assign product_form_id = ‘product-form-’ | append: section.id -%}