Question

所以我有一个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属性来禁用默认验证

Answer 1

在您的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>

Answer 2

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

您可以尝试这种方式。

显示带有嵌入式图像的单选按钮的验证消息

2 个答案: