What steps should I take to trigger a notification when no selection has been made?

Question

What steps should I take to trigger a notification when no selection has been made?

When the product size is not set, the text "Must pick 1 size for the product" should be displayed. However, I am facing an issue with displaying this text. Can someone guide me on how to properly use the select and input elements?

<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
    <option disabled selected>Select a Size</option>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
</select>

enter image description here

css validation input

Answer 1

Answer №1

Welcome to StackOverflow!

Your code has a couple of issues that need addressing.

The problem with the oninvalid callback is that it was never triggered because there was no validation check on the select element. To fix this, you should enclose the select in a form element and include a <button> within it. When the user clicks this button, the browser will validate the form and if the select is invalid, your oninvalid code will be executed.
Your code works perfectly on Firefox after adding the form wrapper, but it doesn't work on Chrome. To address this, I made the default option appear invalid by adding the value="" attribute to it.

Here's a corrected example:

<form action="javascript:void()">

  <select 
    required 
    name="product_size"
    class="form-control"
    oninput="setCustomValidity('')"
    oninvalid="setCustomValidity('Must pick 1 size for the product')"
  >
      <option value="" disabled selected>Select a Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
  </select>

  <button type="submit">Submit</button>
</form>

Answer 2

Welcome to StackOverflow!

Your code has a couple of issues that need addressing.

The problem with the oninvalid callback is that it was never triggered because there was no validation check on the select element. To fix this, you should enclose the select in a form element and include a <button> within it. When the user clicks this button, the browser will validate the form and if the select is invalid, your oninvalid code will be executed.
Your code works perfectly on Firefox after adding the form wrapper, but it doesn't work on Chrome. To address this, I made the default option appear invalid by adding the value="" attribute to it.

Here's a corrected example:

<form action="javascript:void()">

  <select 
    required 
    name="product_size"
    class="form-control"
    oninput="setCustomValidity('')"
    oninvalid="setCustomValidity('Must pick 1 size for the product')"
  >
      <option value="" disabled selected>Select a Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
  </select>

  <button type="submit">Submit</button>
</form>

What steps should I take to trigger a notification when no selection has been made?

Answer №1

Similar questions

Empty Textarea Issue on iOS Safari on Mobile Device

How to create a custom Angular 2+ directive for detecting a reset function on an input element

When utilizing the position: absolute property, scrolling down my content becomes challenging

The movement of the Bootstrap navbar brand causes a shift in adjacent elements

How to restrict CSS div from expanding with content and implement scrollbars instead?

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

JS Code from a JS Fiddle failing to run in a web browser examination

`The chosen item is not appearing in view`

Adjusting the full width TD media query for HTML emails on iPhone is not functioning properly

Navigate through the overlay div to access the canvas, with a delegated click event triggered by the coordinates

The webpage appears to be operating smoothly when tested locally and on JSFiddle, however it is encountering

Tips on creating CSS for an element with certain text within it?

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

What is the best way to affix this image to the bottom of the div?

Is it possible to vary the font size for different fonts within a single page?

How can the carousel item numbers be adjusted for proper display?

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Novice level: transforming a numerical list with a non-string input

Is it usual for the container to overflow with div content?

Leverage JavaScript to display images based on the class of the element