jQuery Validator, effettua entrambi i campi richiesti

Question

Sto cercando di assicurarmi che l'utente inserisca 1 di 2 campi, "ExactOrderSize" o "approxOrderSize".

<p>Exact size of your order (# of items)</p> 
<input id="ExactOrderSize" type="text" name="ExactOrderSize"> 

<p>Approximate size of your order</p> 
<select id="approxOrderSize" name="approxOrderSize" > 
    <option value="" selected="selected"></option> 
    <option value="0">0-35</option> 
    <option value="35">35-50</option> 
    <option value="50">50-100</option> 
</select> 

Per fare ciò, sto utilizzando l'aiuto di jQuery Validator. Tutto funziona bene con esso, ad eccezione di questa regola di convalida personalizzata, che sembra non fare nulla.

$('#quoteform').validate({ 
    rules: { 
    FirstName: { 
     required: true 
    }, 
    LastName: { 
     required: true 
    }, 
    approxOrderSize: { 
     required: function() { 
     if($('#ExactOrderSize').val()=="") 
      return true; 
     else 
      return false; 
     } 
    }, 
    DateNeededBy: { 
     required: true 
    } 
    } 
}); 

La mia idea era quella di eseguire fondamentalmente una funzione che, se il campo #ExactOrderSize non è stato compilato, ha reso il campo #approxOrderSize richiesto. Anche noto come set required = true

Ciò che abbiamo scoperto dalle risposte StackOverflow finora è che i problemi si trovano nei due campi potenzialmente nascosti. Quando inizialmente la pagina non carica, vengono visualizzati inizialmente #ExactOrderSize o #approxOrderSize.

Devono fare clic su uno di questi due pulsanti per mostrare quel campo:

A seconda di quale pulsante selezionano, un'animazione presentazioni campo appropriato.

"Sì" -> mostra il campo #ExactOrderSize

"No" -> mostra il campo #approxOrderSize

ho pensato che questo sarebbe un bella interfaccia utente, ma a quanto pare sta causando problemi con i messaggi di convalida in grado di mostrare, il che rende la validazione di jQuery non funziona.

Come soluzione ho provato:

$('#quoteform').submit(function() { 
    $('#not-exact').show(); 
    $('#yes-exact').show(); 
}); 

In questo modo tutti i campi sarebbero mostrando dopo che il modulo invia .. ma ancora non funziona.

P.S. La pagina attuale è HERE se vuoi guardarla.

Answer 1

che sto cercando di fare in modo che l'utente inserisce 1 su 2 campi

Esiste già una regola integrato in questo plugin chiamato require_from_group che fa esattamente questo.

1. Includere the additional-methods.js file per ottenere questa regola.

2. Aggiungere uno class a entrambi questi campi, ExactOrderSize e approxOrderSize. Qualcosa come ordersize.

3. dichiarare la regola all'interno del metodo .validate() come questo ...

   rules: { 
       ExactOrderSize: { 
        require_from_group: [1, '.ordersize'] 
       }, 
       approxOrderSize: { 
        require_from_group: [1, '.ordersize'] 
       }, 
       // your other fields/rules 
   }, 
   

4. Usa the groups option per assicurare non solo un messaggio di errore per entrambi i campi.

   groups: { 
       ordersize: "ExactOrderSize approxOrderSize" 
   }, 
   

5. Usa the errorPlacement option per collocare il messaggio di errore in una posizione che ha più senso per questi due campi.

   errorPlacement: function (error, element) { 
       if ($(element).hasClass("ordersize")) { 
        error.insertBefore(element.prev('p')); // custom error placement 
       } else { 
        error.insertAfter(element); // default error placement 
       } 
   } 
   

6. NOTA: Il plugin ignorerà tutti i campi nascosti per impostazione predefinita. Per disabilitare questa funzione, è sufficiente impostare the ignore option su [] e nulla verrà ignorato. Quindi puoi semplicemente mostrare/nascondere i campi di input in base ad alcuni gestori di eventi personalizzati.

demo funzionante: http://jsfiddle.net/b0qe6Ljg/

Answer 2

jQuery Le regole di convalida vengono applicate agli elementi con un attributo name corrispondente, non un attributo id corrispondente. Prova questo:

OrderRange: { 
    required: function() { 
    if($('#exactOrderSize').val()=="") 
     return true; 
    else 
     return false; 
    } 
} 

Answer 3

Penso che questo potrebbe funzionare per voi. Qui ho effettuato una chiamata di funzione su submit of form, che controlla che uno dei due elementi sia compilato.

function validateMyForm() { 
 
    var a = document.getElementById('exsize').value.length; 
 
    var b = document.getElementById('opt').value.length; 
 
    if (a == 0 && b == 0) { 
 
    alert("Please fill either of the Fields"); 
 
    } else { 
 
    //success 
 
    } 
 
}

<form onsubmit='return validateMyForm()'> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="text" placeholder="Exact size of order" id="exsize" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select id="opt"> 
 
      <option value="" disabled selected>Select Size</option> 
 
      <option value="A">A</option> 
 
      <option value="B">B</option> 
 
      <option value="C">C</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="submit" value="submit" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 4

Giocando intorno con questo in Firebug un po 'penso di avere una soluzione. Quando l'utente invia il modulo e si fa la convalida, prima di restituire true o false nella convalida per approxOrderSize, dovremmo mostrare il campo corretto e nascondere l'altro. Esempio, se l'utente non ha inserito nulla nel campo ExactOrderSize, quando invia il modulo il validatore per approxOrderSize controlla se ExactOrderSize ha un valore.Se non ha un valore, nascondi il campo e mostra approxOrderSize, quindi restituisci true.

approxOrderSize: { 
    required: function() { 
    if($('#ExactOrderSize').val()=="") 
     $("#NoExact").trigger("click"); 
     return true; 
    else 
     $("#YesExact").trigger("click"); 
     return false; 
    } 
} 

Almeno nella mia sperimentazione, questo sembra funzionare perché mostra il campo che è ora di essere richiesta e mostra messaggio di convalida per il campo.