web-dev-qa-db-fra.com

HTML5 requis attribut l'un des deux champs

J'ai un formulaire avec deux champs de saisie obligatoires:

<form>
    <input type="tel" name="telephone" required>
    <input type="tel" name="mobile" required>
    <input type="submit" value="Submit">
</form>

Est-il possible de valider les navigateurs de manière à ce qu'un seul d'entre eux soit requis? c'est-à-dire que si le téléphone est rempli, ne jetez pas d'erreur sur le fait que le mobile est vide et inversement

html5formsvalidation
19
Andy

J’ai joué avec quelques idées et j’ai maintenant une solution qui fonctionne avec jQuery:

jQuery(function ($) {
    var $inputs = $('input[name=telephone],input[name=mobile]');
    $inputs.on('input', function () {
        // Set the required property of the other input to false if this input is not empty.
        $inputs.not(this).prop('required', !$(this).val().length);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  Telephone:
  <input type="tel" name="telephone" value="" required>
  <br>Mobile:
  <input type="tel" name="mobile" value="" required>
  <br>
  <input type="submit" value="Submit">
</form>

Ceci utilise l'événement input sur les deux entrées et quand l'une n'est pas vide, elle définit la propriété requise de l'autre entrée sur false.

J'ai écrit un plugin jQuery wrapping le code JavaScript ci-dessus afin qu'il puisse être utilisé sur plusieurs groupes d'éléments.

30
Andy

Pour deux champs de texte, la réponse de Andy est géniale, mais dans le cas de plus de deux champs, nous pouvons utiliser quelque chose comme ceci. 

jQuery(function ($) {
    var $inputs = $('input[name=phone],input[name=mobile],input[name=email]');
    $inputs.on('input', function () {
        var total = $('input[name=phone]').val().length + $('input[name=mobile]').val().length + $('input[name=email]').val().length;
        $inputs.not(this).prop('required', !total);

    });
});
1
Sanaullah Ahmad

Vous feriez mieux de valider les données de formulaire avec Javascript de toute façon, car la validation HTML5 ne fonctionne pas dans les navigateurs plus anciens. Voici comment: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Form Validation Phone Number</title>
</head>
<body>
    <form name="myForm" action="data_handler.php">
        <input type="tel" name="telephone">
        <input type="tel" name="mobile">
        <input type="button" value="Submit" onclick="validateAndSend()">
    </form>
    <script>
        function validateAndSend() {
            if (myForm.telephone.value == '' && myForm.mobile.value == '') {
                alert('You have to enter at least one phone number.');
                return false;
            }
            else {
                myForm.submit();
            }
        }
    </script>
</body>
</html>

.
Démo en direct ici: http://codepen.io/anon/pen/LCpue?editors=100 . Faites-moi savoir si cela fonctionne pour vous, si vous voulez. 

0
Frank Conijn