Is it possible to conceal a form field until a previous field has been completed?

Question

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necessary.

For instance: I request "Group Name". Once a valid group name is entered (validated through Javascript without using a dropdown), the field for "Group Password" should then become visible.

I was thinking of using something like this:

document.getElementById("groupname").disabled = true

However, not sure how to trigger it. Maybe incorporating html5 validation could serve as a trigger?

javascript html forms css

Answer 1

Answer №1

Upon initial inspection, it appears that the following code snippet is functional:

:invalid ~ .example {
    display: none;
}

<form>
    <input type="text" required/> <!-- Shown -->
    <fieldset class="example">
        <input type="text"/>  <!-- Hidden until first input is filled -->
    </fieldset>        
</form>

This setup should be effective for basic scenarios. Additionally, further customization can be achieved by utilizing the setCustomValidity function to incorporate specific validation requirements.

Answer 2

Upon initial inspection, it appears that the following code snippet is functional:

:invalid ~ .example {
    display: none;
}

<form>
    <input type="text" required/> <!-- Shown -->
    <fieldset class="example">
        <input type="text"/>  <!-- Hidden until first input is filled -->
    </fieldset>        
</form>

This setup should be effective for basic scenarios. Additionally, further customization can be achieved by utilizing the setCustomValidity function to incorporate specific validation requirements.

Is it possible to conceal a form field until a previous field has been completed?

Answer №1

Similar questions

actions with frontend routing for CRUD operations

Getting form data in a route handler in Next.js 13 is a straightforward process

The Catcomplete widget malfunctioned after the update of jQuery UI from version 1.8 to 1.12

Troubleshooting problems with callback functionality in conjunction with Expressjs, JWT authentication, and Angular

Is there a way to modify the browser's user agent using JavaScript or HTML?

Is there a conflict between bootstrap.min.JS and chart.min.js?

Tips for halting the navigation bar when scrolling

Mongoose: When encountering a duplicate key error (E11000), consider altering the type of return message for better error handling

Application built with Ember and search engine crawling by Google

Verify whether an object possesses all the attributes of a class in TypeScript

Can a function be passed as props in a scenario where both a Parent and Child component are functional components?

Issue with ngFor displaying only the second item in the array

In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

Why isn't the nested intricate directive being executed?

Key press event not firing as expected

React-bootstrap-table Axios delete operation causing [object%20Object] to be displayed in the browser console

How can I transfer data from a C# code to a JavaScript file in asp.net?

Learn how to upload an image using Vue.js and then trigger a custom method

Positioning a div beyond the visible area without altering its original width, with the assistance of the Skrollr plugin

Tips on managing the onKeyUp event in a ReactJS form