Show validation error messages for radio buttons alongside images in a single row

Question

Show validation error messages for radio buttons alongside images in a single row

Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input.

I attempted to add another div after the radio buttons with the class "invalid-feedback" but the message failed to display.

<div id="mb">
    <input type="radio" id="h" value="hancock" name="mb" required>
    <label for="h"><img src="static/hancock.jpg" class="img-thumbnail" alt="hancock"></label>
    <input type="radio" id="s" value="shirahoshi" name="mb" required>
    <label for="s"><img src="static/shirahoshi.png" class="img-thumbnail" alt="shirahoshi"></label>
    <input type="radio" id="n" value="nami" name="mb" required>
    <label for="n"><img src="static/nami.jpeg" class="img-thumbnail" alt="nami"></label>
    <div class="invalid-feedback">Please select one option!</div>
</div>

The invalid feedback text was not displayed as intended.

Edit: For code snippet see https://jsfiddle.net/uv51r3jw/5/. I used the novalidate attribute of form to disable default validation.

html css bootstrap-4

Answer 1

Answer №1

Enhanced the Javascript validation by adding three lines of code to display invalid feedback when there is no selection and applied styling to images.

        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            if ($('input.Check[name=mb]:checked').length < 1) {  
                               $(".img-thumbnail").css('outline', '1px solid red');
                               $(".invalid-feedback").show();
            }
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

   img
    {
        height:100px;
        width:100px;
        object-fit: cover;  
    }

<html>

<head>
    
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <!-- http://getbootstrap.com/docs/4.1/ -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <title>snippet</title>
</head>

<body>
    <form action="#" class="needs-validation" novalidate>
        <div id="mb">
            <input type="radio" id="h" value="hancock" name="mb" required>
            <label for="h"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="h"></label>
            <input type="radio" id="s" value="shirahoshi" name="mb" required>
            <label for="s"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="s"></label>
            <input type="radio" id="n" value="nami" name="mb" required>
            <label for="n"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="n"></label>
            <div class="invalid-feedback">Pick One!</div>
        </div>
        <button class="btn btn-primary" type="submit" style="margin-left:11px">Submit</button>
    </form>
    
</body>

</html>

Answer 2

Enhanced the Javascript validation by adding three lines of code to display invalid feedback when there is no selection and applied styling to images.

        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            if ($('input.Check[name=mb]:checked').length < 1) {  
                               $(".img-thumbnail").css('outline', '1px solid red');
                               $(".invalid-feedback").show();
            }
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

   img
    {
        height:100px;
        width:100px;
        object-fit: cover;  
    }

<html>

<head>
    
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <!-- http://getbootstrap.com/docs/4.1/ -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <title>snippet</title>
</head>

<body>
    <form action="#" class="needs-validation" novalidate>
        <div id="mb">
            <input type="radio" id="h" value="hancock" name="mb" required>
            <label for="h"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="h"></label>
            <input type="radio" id="s" value="shirahoshi" name="mb" required>
            <label for="s"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="s"></label>
            <input type="radio" id="n" value="nami" name="mb" required>
            <label for="n"><img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail" alt="n"></label>
            <div class="invalid-feedback">Pick One!</div>
        </div>
        <button class="btn btn-primary" type="submit" style="margin-left:11px">Submit</button>
    </form>
    
</body>

</html>

Answer 3

Answer №2

let checkedValue = $("input[name='mb']:checked").val();
if (typeof checkedValue === 'undefined') {
  $('.invalid-feedback').show();
} else {
  $('.invalid-feedback').hide();
}

This could be a solution for you.

Answer 4

let checkedValue = $("input[name='mb']:checked").val();
if (typeof checkedValue === 'undefined') {
  $('.invalid-feedback').show();
} else {
  $('.invalid-feedback').hide();
}

This could be a solution for you.

Show validation error messages for radio buttons alongside images in a single row

Answer №1

Answer №2

Similar questions

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

Is the form being submitted with the href attribute?

What is the best way to add a gradient background image to a container that also has margins?

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

The website does not support the zoom out or scrolling features on iOS devices

Get a polished look using HTML and CSS exclusively

Submitting a jQuery Userlike form will not result in a page change

Updating the Hero Image

Automatically selecting and fetching checkbox values using JavaScript

Allow the div to break out of the overflow: hidden property without disrupting the overall page layout

Steps for deactivating dropdown when choosing either the first or second dropdown in reverse

Tips for showing data from Ajax responses on an HTML page

Combine various canvases into a single one (for exporting purposes) with pure Javascript

Issues with jQuery animate not functioning properly when triggered on scroll position

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

Verify whether the value is in the negative range and implement CSS styling in React JS

ASP.NET ensures that the entire page is validated by the form

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops