Validité de découplage de deux entrées radio du même nom

J'ai un formulaire avec deux <input> s portant le même nom. Lorsque l'un d'entre eux est nécessaire et non sélectionnés (donc, non valable), l'autre se caractérise aussi comme invalide:Validité de découplage de deux entrées radio du même nom

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <form id="form"> 
 
    <input id="rad1" type="radio" name="my radio 3" value="option 1" required> 
 
    <input id="rad2" type="radio" name="my radio 3" value="option 2"> 
 
    </form> 
 

 
    <script> 
 
    function checkValid() { 
 
     console.log('Should be valid form: ' + document.getElementById('form').checkValidity()); 
 
     console.log('Rad1 should show false: ' + document.getElementById('rad1').checkValidity()); 
 
     console.log('Rad2 should show true: ' + document.getElementById('rad2').checkValidity()); 
 
    } 
 

 
    checkValid(); 
 
    </script> 
 

 
</body> 
 

 
</html>

je me attends à la deuxième entrée de la radio soit valide. Comment puis-je rendre #rad2 valide (c'est-à-dire checkValidity() renvoient true)? Pourquoi la validité est-elle couplée entre ces deux radios? J'ai lu tous les documents MDN possibles à ce sujet, mais je ne trouve pas d'explication.

Source

2017-10-19 jlhonora

Lorsque vous définissez un groupe de boutons radio comme requis, l'exigence est qu'une option est sélectionnée. Si vous voulez vérifier qu'une option spécifique est cochée, vous aurez besoin d'utiliser quelque chose comme var selected = document.querySelectorAll('#Rad1:checked');var isSelected = selected.length > 0 ? true: false;

Remarquez comment que vous vérifiez les radios dans mon snip ajusté ci-dessous, ils ont tous deux changements TRUE:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <form id="form"> 
 
    <input id="rad1" type="radio" name="my radio 3" value="option 1" required> 
 
    <input id="rad2" type="radio" name="my radio 3" value="option 2"> 
 
    </form> 
 

 
    <script> 
 
    function checkValid() { 
 
     console.log('Should be valid form: ' + document.getElementById('form').checkValidity()); 
 
     console.log('Rad1 should show false: ' + document.getElementById('rad1').checkValidity()); 
 
     console.log('Rad2 should show true: ' + document.getElementById('rad2').checkValidity()); 
 
    } 
 

 
    checkValid(); 
 
    $('[name="my radio 3"]').on('change', function() { 
 
     checkValid(); 
 
    }) 
 
    </script> 
 

 
</body> 
 

 
</html>

Source

2017-10-19 19:22:11 Keith

Validité de découplage de deux entrées radio du même nom

Répondre

Questions connexes