如何使用Bootstrap 4为带有嵌入式图像的单选按钮显示验证消息？

默认情况下，Bootstrap 4具有带内嵌图像的单选按钮的各种表单功能。 HTML 5具有默认的验证功能，但是，对于自定义验证，我们必须使用JavaScript或jQuery。以下方法将有助于内嵌图像的单选按钮的显示验证消息。

方法1：首先使用form-check-inline类包装单选按钮及其标签。然后在上述标签后的包装中添加img标签。通过添加单选按钮的必填属性，使用默认的必填验证。最后，仅在未选中单选按钮的情况下，使用警报类显示消息并使用jQueries attr() ， addClass()和html()方法触发它。

• 示例：下面的程序说明了基于上述方法显示带有行内图像的单选按钮的验证消息。

    
  
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
          body {
              text-align: center;
          }
          h1 {
              color: green;
          }
      
  
    
  
      
          GeeksforGeeeks
            
          
            
          Selcet Your Gender
            
          
              
                  
                  
                      
                  
              
                
              
                  
                  
                      
                  
              
              
                
              
                  
              
          
            
          
            
          
      
        
      
        
          // On clicking submit do following
          $("input[type=submit]").click(function() {
                
              var atLeastOneChecked = false;
              $("input[type=radio]").each(function() {
                
                  // If radio button not checked
                  // display alert message 
                  if ($(this).attr("checked") != "checked") {
                    
                      // Alert message by displaying
                      // error message
                      $("#msg").html(
          "<span class='alert alert-danger' id='error'>"
          + "Please Choose atleast one</span>");
                  }
              });
          });
      
  
    

• 输出：
  

方法2：使用form-inline和input-group类将单选按钮和img标签包装在一起以进行内联。然后使用警报类显示消息，并仅当未选中单选按钮时才使用jQuery attr() ， addClass()和html()方法触发消息。最后，使用jQuery val()函数获取检查值，并将其与Bootstrap警报组件连接起来，以显示成功/失败提交表单的消息。另外，请使用preventDefault()函数防止提交后重新设置表单，因为它会显示提交成功/失败的消息。不要忘记在上述标签后的包装中添加img标签。

注意：在更大的窗口中运行此代码。

示例：下面的示例说明了如何基于上述方法显示带有内嵌图像的单选按钮的验证消息。

   

    
      
    
      
    
      
    
    
      
    
    
      
    
    
   
    
        body {
            text-align: center;
        }
        #option3img {
            transform: rotate(270deg);
        }
           
        #option1img {
            transform: rotate(180deg);
        }
        body {
            margin: 55px;
        }
          
        input[type=submit] {
            position: absolute;
            left: 43%;
            top: 52%;
        }
           
        h1 {
            color: green;
        }
    

   

    
        GeeksforGeeeks
        
          
        
            Choose the Correct logo for GeeksforGeeks
        
          
        
            
                          
                
                
                    
                        
                            
                                  
                            
                        
                        
                
                          
                
                    
                        
                            
                                       
                            
                        
                    
                
                  
                
                    
                        
                            
                                
                                           
                                
                            
                        
                    
                
            
                      
            
                
            
        
          
        
        
    
      
    
     
        // On clicking submit do following
        $("input[type=submit]").click(function() {
            var atLeastOneChecked = false;
          
            // If radio button not checked
            // display alert message 
            $("input[type=radio]").each(function() {
                if ($(this).attr("checked") != "checked") {
                  
                    // Alert message by displaying
                    // error message
                    $("#msg").html(
'<span class="alert alert-danger alert-dismissible fade show" id="alert1">'+ 
'Make atleast one choice'+
' <button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true" >×</span></button></span>');
                } else {
                    $("#msg").html(
'<span class="alert alert-success alert-dismissible fade show" id="alert2">'+
'Success Choise Made'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true" >×</span></button></span>');
                }
            });
        });
    
  
    
        $(document).ready(function() {
          
            // Validation message for empty choice submission
            $("input[type='submit']").click(function() {
                var radioValue = $("input[name='Radiobtn']:checked").val();
                  
                if (radioValue) {
                    $("#msg").html(
'<span class="alert alert-success alert-dismissible fade show" id="alert3">'+
'Success..! You Made your Choise : <strong>' + radioValue +
 '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
 '<span aria-hidden="true" >×</span></button></span>');
                    if (radioValue == 'option2') {
                     
                        // Validation message for correct choice
                        $("#ans").html(
'<span class="alert alert-success alert-dismissible fade show" id="alert4">'+
'You Have Made Correct Choise : <strong>' + radioValue +
'</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true" >×</span></button></span>');
                    } else {
                     
                        // Validation message for wrong choice
                        $("#ans").html(
'<span class="alert alert-warning alert-dismissible fade show" id="alert5">'+
'Warning ..! You Have Made Wrong Choise : <strong>' + radioValue +
'</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true" >×</span></button></span>');
                    }
                }
            });
        });
     
        // To avoid form reload after submission//
        $("form").submit(function(e) {
            e.preventDefault();
        });
    

   

输出：

参考： https : //getbootstrap.com/docs/4.4/components/forms/