Ho un semplice modulo html che ho aggiunto la convalida all'utilizzo del plug-in JQuery Validation. Lo faccio funzionare per singoli campi che richiedono un valore. Ora ho bisogno di estenderlo in modo che se un utente risponde Sì a una domanda, deve inserire qualcosa nel campo Dettagli, altrimenti il campo Dettagli può essere lasciato vuoto. Sto usando i pulsanti radio per visualizzare Sì/No. Ecco il mio modulo HTML completo - non sono sicuro dove andare da qui:utilizzando il plugin di convalida JQuery
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
Grazie per la risposta. Ho aggiunto il codice negli elementi
@Steve - Ecco il tuo codice con quello che ho aggiunto in precedenza e funzionante, assicurati che le virgolette e tutte siano corrette: http://jsfiddle.net/H2YLp/ –
OK, grazie, è grandioso, ora funziona. Apprezzo il tuo aiuto, non ho capito che sarebbe stato un semplice cambiamento implementarlo. Questa è davvero una domanda bonus, ma vorrei anche fare in modo che l'etichetta per il campo di inserimento textarea cambi colore in rosso quando l'utente fa clic su Sì per indicare che questo è ora un campo obbligatorio. Fare clic su No rimarrebbe nero. Pertanto, se l'utente fa clic su Sì per la domanda 1, i dettagli: Dettagli: per la domanda 1 cambieranno quindi il colore in rosso. Qualche idea? –