HTML5 attributo richiesto uno dei due campi

Ho un form con due campi di input richiesti:HTML5 attributo richiesto uno dei due campi

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

E 'possibile ottenere i browser per convalidare in modo che solo è richiesto uno di loro? Ad esempio, se il telefono è pieno, non lanciare un errore sul cellulare che è vuoto e viceversa

fonte

2014-06-25 Andy

Penso che questo sarebbe fuori dal controllo HTML e dovresti implementare una sorta di funzionalità JS. Un rapido Google mostra questo jsfiddle http://jsfiddle.net/LEZ4r/1/ in modo che tu possa avere una dichiarazione if per il controllo. Spero che questo aiuti ... – CheckeredMichael

Scopri [** questo **] (http://stackoverflow.com/a/10694930/3509874) risposta! – urbz

ho giocato un po 'con alcune idee e ora hanno una soluzione di lavoro per questo problema utilizzando 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>

Questa utilizza l'evento input su entrambi gli ingressi, e quando uno non è vuota imposta la proprietà richiesta dell'altro input su false.

Ho scritto un jQuery plugin avvolgendo il codice JavaScript sopra in modo che possa essere utilizzato su più gruppi di elementi.

fonte

2014-06-26 13:40:25 Andy

Con alcune modifiche per il mio requisito, questo ha funzionato in modo fantastico, grazie .. – Anupam

Si consiglia comunque di convalidare i dati con JavaScript, in quanto la convalida HTML5 non funziona nei browser meno recenti. Ecco come:

<!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>

.
Demo live qui: http://codepen.io/anon/pen/LCpue?editors=100. Fammi sapere se questo funziona per te, se vuoi.

fonte

2014-06-26 04:53:47

Grazie per la risposta. Tuttavia, la convalida dei moduli viene eseguita sul lato server, quindi non mi preoccupo dei browser più vecchi. La convalida del modulo HTML5 è un miglioramento progressivo per gli utenti con i browser più recenti che vorrei utilizzare e visualizzare i messaggi di errore nativi del browser – Andy

HTML5 attributo richiesto uno dei due campi

risposta

Problemi correlati