De forma predeterminada, Bootstrap 4 tiene varias funciones de formulario para botones de radio con imágenes en línea. Aquí HTML 5 tiene funciones de validación predeterminadas. Sin embargo, para la validación personalizada, debemos usar JavaScript o jQuery. Los siguientes enfoques ayudarían en el mensaje de validación de visualización para botones de radio con imágenes en línea.
Enfoque 1: primero envuelva los botones de radio y su etiqueta usando la clase form-check-inline. Luego agregue la etiqueta img dentro del ajuste anterior después de la etiqueta de la etiqueta. Use la validación requerida predeterminada agregando el atributo requerido del botón de opción. Finalmente, muestre el mensaje usando la clase de alerta y actívelo con los métodos jQueries attr() , addClass() y html() solo si el botón de opción no está marcado.
- Ejemplo: El siguiente programa muestra un mensaje de validación para botones de radio con imágenes en línea según el enfoque anterior.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeeks</h1>
<br><br>
<p>Select Your Gender</p>
<form>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2" required>
<label class="form-check-label"
for="inlineRadio2">
<img id="option2img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200114123932/malelogo.png"
class=
"rounded-circle rounded-sm img-fluid img-thumbnail">
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio3"
value="option3" required>
<label class="form-check-label"
for="inlineRadio3">
<img id="option3img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200114123931/femalelogo.png"
class=
"rounded-circle rounded-sm img-fluid img-thumbnail">
</label>
</div>
<br>
<div class="form-check form-check-inline">
<input type="submit"
class="form-control mt-3 "
value="Submit"
name="submit"
id="checked" />
</div>
</form>
<br><br>
<span id="msg"></span>
</div>
<script>
// 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>");
}
});
});
</script>
</body>
</html>
- Producción:
Enfoque 2: envuelva los botones de radio junto con la etiqueta img para en línea usando la clase form-inline y input-group. Luego muestre el mensaje usando la clase de alerta y actívelo con los métodos jQuery attr() , addClass() y html() solo si el botón de opción no está marcado. Finalmente, obtenga los valores verificados usando la función jQuery val() y concatene con el componente de alerta de Bootstrap para mostrar el mensaje para el envío exitoso/fallido del formulario. Además, use la función preventDefault() para evitar que se restablezca el formulario después del envío porque muestra un mensaje de envío exitoso/fallido. No olvide agregar la etiqueta img dentro del ajuste anterior después de la etiqueta.
Nota: Ejecute este código en una ventana más amplia.
Ejemplo:El siguiente ejemplo ilustra cómo mostrar un mensaje de validación para botones de radio con imágenes en línea según el enfoque anterior.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
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;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeeks</h1>
<br>
<p><strong>
Choose the Correct logo for GeeksforGeeks
</strong></p>
<form>
<div class="form-inline">
<!--form group with image inline-->
<div class="input-group mr-sm-2">
<div class="form-check-inline">
<label class="form-check-label input-group-text ml-2">
<input type="radio" aria-label=
"Radio button for following text input"
name="Radiobtn" id="option1" value="option1">
<img id="option1img"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200108110429/icon4.png"
class=
"bd-placeholder-img rounded-right rounded-sm img-fluid ml-2">
</label>
</div>
</div>
<div class="input-group mr-sm-2">
<div class="form-check-inline">
<label class="form-check-label input-group-text ">
<input type="radio"
aria-label="Radio button for following text input"
name="Radiobtn" id="option2" value="option2">
<img id="option2img"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200108110429/icon4.png"
class=
"bd-placeholder-img rounded-right rounded-sm img-fluid ml-2">
</label>
</div>
</div>
<div class="input-group mr-sm-2">
<div class="input-group-prepend">
<div class="form-check-inline">
<label class="form-check-label input-group-text ml-2">
<input type="radio"
aria-label="Radio button for following text input"
name="Radiobtn" id="option3" value="option3">
<img id="option3img"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200108110429/icon4.png"
class=
"bd-placeholder-img rounded-right rounded-sm img-fluid ml-2">
</label>
</div>
</div>
</div>
</div>
<div class="form-inline mt-5">
<input class="form-control mr-3 btn btn-info"
type="submit" value="Submit">
</div>
</form>
<div class="mt-3" id="msg"></div>
<div class="mt-3" id="ans"></div>
</div>
<script>
// 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>');
}
});
});
</script>
<script>
$(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();
});
</script>
</body>
</html>
- Producción:
Referencia: https://getbootstrap.com/docs/4.4/components/forms/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA