Validation for radio buttons in Bootstrap 4

Looking for assistance with form validation using Radio elements on a Bootstrap 4 page.

I want to display an error message underneath the radio element:

<div class="invalid-feedback">Please choose an option</div>

Below is the code snippet within my form:

          <section>
            <h6>Lorem Ipsum</h6>
            <p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>

            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
              <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
              <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
            </div>

          </section>

When placing the invalid-feedback inside the form-check element, the error message appears below the single element. When it's placed outside the form-check element, the error message doesn't show up.

What's the correct way to achieve this?

htmlcssformsvalidationbootstrap-4

Answer №1

To overcome this issue, I found a solution by placing the invalid-feedback div within the last form-check and adjusting the margins to align the div properly.

Inline Method:

     <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: 1em">Please choose an option</div>
    </div>

Non-inline Method:

     <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
          <div class="invalid-feedback" style="margin-left: -1.25em">Please choose an option</div>
    </div>

Answer №2

One clever solution is to place it outside the form-check div using a hidden radio button.

If neither of the two visible radio buttons are selected, the error message will be displayed.

      <section>
        <h6>Lorem Ipsum</h6>
        <p>Donec molestie orci rhoncus, congue magna facilisis, laoreet sapien. Nam.</p>

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling1" value="1" required>
          <label class="form-check-label" for="agreeMarketProfiling1">I AGREE</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="agreeMarketProfiling" id="agreeMarketProfiling2" value="0" required>
          <label class="form-check-label" for="agreeMarketProfiling2">DON'T AGREE</label>
        </div>
        <div>
           <input class="display-d" type="radio" name="agreeMarketProfiling" value="" required>
           <div class="invalid-feedback">Please choose an option</div>
        </div>
      </section>

Answer №3

There might be various approaches to handle this situation, but I opted to enclose my inline radio buttons within a div styled with the "form-control" class, and then included the "is-invalid" class when necessary. This approach renders the radio buttons with a red border box when invalid, providing the desired functionality.

<div class="form-group">
    <div class="<?php echo isset($errors['published'])?"form-control is-invalid":null;?>" >
        <div class="form-check form-check-inline ">
            <input type="radio" name="published" id="published1" value="1" class="form-check-input <?php echo isset($errors['published'])?"is-invalid":(isset($errors)?"is-valid":null);?>" <?php echo !isset($post['published'])||$post['published']==1?"checked":null;?>/>
            <label class="form-check-label" for="published1">Published</label>
        </div>

        <div class="form-check form-check-inline">
            <input type="radio" name="published" id="published2" value="0" class="form-check-input <?php echo isset($errors['published'])?"is-invalid":(isset($errors)?"is-valid":null);?>" <?php echo isset($post['published'])&&$post['published']==0?"checked":null;?>/>
            <label class="form-check-label" for="published2">Un-published</label>

        </div>
    </div>
    <div class="invalid-feedback"><?php echo isset($errors['published'])?$errors['published']:null;?></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript drop-down menu malfunctioning

I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...

javascriptcss

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

javascripthtmlnode.jsexpress

Converting ISO date format to 'MM/DD/YYYY' format in a Bootstrap/Angular application

Is there a way to convert an ISO date string to 'MM/DD/YYYY' on load in a bootstrap/angular environment? Upon loading, the date picker currently displays like this: https://i.sstatic.net/g5MkI.jpg We want the user to input the date in 'MM/ ...

angularbootstrap-4

Unable to apply inset box-shadow to image

I've added a box-shadow to my image. box-shadow: 0 0 10px RED inset However, the shadow is not showing up on the image. When I use Firebug to change the image path, I can see that the shadow is behind the image. How can I apply the shadow directly ...

htmltwitter-bootstrapcss

Could multiple values be stored in the option tag in Laravel after selection?

I have encountered an issue where I am able to display all the attribute drop-down options and obtain the attribute id in the value="{{$play->id}}" after selection, which is then stored in the select with name="attribute_id". This allows me to easily fe ...

phphtmllaravellaravel-5.5

How to Transfer Data from a Dynamic Drop-down Menu to PHP for Processing and Presentation in a Div Element on the Same Web Page

I've scoured various online resources, including StackOverflow, but haven't been able to find a solution for this issue described in the title. On my base page, I have a dynamically generated dropdown list as shown below: <div class="tipfixtu ...

javascriptphpjqueryhtmlajax

Concealing GridView columns in ASP.NET using Bootstrap 4

Having some trouble with a boundfield that is showing an unwanted border in the column when the visible parameter "d-xl-block" is used. Any ideas on how to fix this issue? <asp:BoundField DataField="casZaciatku" ItemStyle-CssClass="d-none d-xl-block al ...

asp.netgridviewbootstrap-4

What are the benefits of incorporating CSS into a CSS block rather than utilizing inline output with HtmlHelper in CakePHP?

Just a few days ago, I embarked on the journey of learning CakePHP through their blog tutorial. Now, I am diving into writing my own small project to gain hands-on experience with the framework. After going through their documentation, I discovered two ...

phphtmlcsscakephp

What is the process for a webpage to save modifications made by JavaScript?

I am working on a simple web page with a form that contains checkboxes representing items from a database. When the submit button is clicked, these items may be retrieved. Additionally, there is an option to add a new item at the bottom of the page. My go ...

phpjavascripthtml

What steps should I take to ensure that this modal remains persistent?

I am searching for a method to keep this modal persistent even after it appears. Currently, the user can easily close it by clicking outside of the div. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title ...

javascriptcssmodal-dialogbootstrap-modal

What is the best way to utilize SCSS variables alongside data-attributes within Vue JS and Bootstrap Vue?

I'm currently working on implementing a Dark Theme button for my application that can change the entire theme with just one click. Although the functionality is already in place, I am exploring ways to make this process simpler and more efficient. So ...

vue.jsbootstrap-4sassbootstrap-vue

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

I am currently working on the following code: <h1><span>Test Heading This is the text that I want to display on the right side. This is the text that I want to display on the right side. This is the text that I want</span></h1> < ...

javascriptjqueryhtmlcss

Utilizing Jquery for Effective Asp.Net Validator Management

In what ways can we utilize Asp.NET Validators such as Required Field and Regular Expression with JQuery? Additionally, how can we manipulate their appearance and tailor their functionality using JQuery? ...

jqueryasp.netvalidationrequiredfieldvalidator

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

The functionality of Skrollr on mobile is currently not working properly due to the inability to prevent default actions

Encountering the following error on all chromium browsers while using the Skrollr library and accessing the website through mobile: "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See < ...

javascripthtmlmobileinterventionskrollr

Tips on resetting the position of a div after filtering out N other divs

Check out this code snippet. HTML Code: X.html <input type="text" id="search-criteria"/> <input type="button" id="search" value="search"/> <div class="col-sm-3"> <div class="misc"> <div class="box box-info"> ...

javascriptjqueryhtmlcss

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Is it possible for a CSS block to incorporate another block within it?

Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...

htmlcss

Switch the designation to Hover Class

I am working with nested divs and have assigned a CSS class to one of the inner divs. How can I trigger the hover effect of the class (class.hover) when the user hovers over the outer div, even if they are not directly over the inner div? I believe this m ...

javascripthtmlcss