CODEWITHSUNDEEP
htmlcssbootstrap-4
Praful
Praful

Reputation: 1

Display validation message for radio buttons with images inline

So i have a div inside of which are three radio buttons with images all inline, I want to display validation message using bootstrap on clicking submit button when there is no input from the user

I have tried using another div after the radio buttons using class-invalid-feedback, it would not 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">Pick One!</div>
    </div>

It would not show the invalid feedback text.

Edit: Snippet https://jsfiddle.net/uv51r3jw/5/ I have used novalidate attribute of form to disable the default validation

Upvotes: 0

Views: 1228

Answers (2)

Alex
Alex

Reputation: 878

Added three lines of code in your javascript validation to force show invalid feedback on no selection and add some styling on 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>

Upvotes: 1

Varun Raval
Varun Raval

Reputation: 134

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

You can try this way.

Upvotes: 1

Related Questions