时间戳

首页 > 解决方案 > 显示内嵌图像的单选按钮的验证消息

html - 显示内嵌图像的单选按钮的验证消息

问题描述

所以我有一个 div，其中有三个单选按钮，图像全部内联，我想在没有用户输入时使用引导程序在单击提交按钮时显示验证消息

我尝试在使用 class-invalid-feedback 的单选按钮之后使用另一个 div，它不会显示。

<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>

它不会显示无效的反馈文本。

编辑：片段 https://jsfiddle.net/uv51r3jw/5/ 我使用了表单的 novalidate 属性来禁用默认验证

标签： htmlcssbootstrap-4

解决方案

在您的 javascript 验证中添加了三行代码，以强制在未选择时显示无效反馈并在图像上添加一些样式

        // 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>

推荐阅读