Você está na página 1de 2

<html>

<head>
<meta name="autor" content="Juliano Claiton" />
<meta name="description" content="Como marcar campo obrigatório em
Javascript" />

<title>Como marcar campo obrigatório em Javascript</title>

<script>
function validarCampoObrigatorio (campo) {
for (i=0; i<document.forms[0].elements.length; i++) {
var nomeElemento = document.forms[0].elements[i].name;
var pos = nomeElemento.indexOf(campo);
if (pos >= 0) {
var label = document.getElementById('label' +
nomeElemento);
if (document.forms[0].elements[i].value == '') {
label.style.color = 'red';
// document.forms[0].elements[i].style.color =
'red';
} else {
label.style.color = 'black';
// document.forms[0].elements[i].style.color =
'black';
}
}
}
}
</script>

</head>
<body>

<form name="MeuFormulario">
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td colspan="2">Marca em vermelho o campo não selecionado.</td>
</tr>
<tr>
<td><a href="javascript: void(0);" onclick="javascript:
validarCampoObrigatorio('bebida');">Valida Bebida</a></td>
<td><a href="javascript: void(0);" onclick="javascript:
validarCampoObrigatorio('petisco');">Valida Petisco</a></td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td><span id="labelbebida0">Bebida 0</span></td>
<td>
<select name="bebida0" class="campoTexto">
<option value="">Selecione a Bebida</option>
<option value="1">Cerveja</option>
<option value="2">Tequila</option>
</select>
</td>
</tr>

<tr>
<td><span id="labelbebida1">Bebida 1</span></td>
<td>
<select name="bebida1" class="campoTexto">
<option value="">Selecione a Bebida</option>
<option value="1">Cerveja</option>
<option value="2">Tequila</option>
</select>
</td>
</tr>
<tr>
<td><span id="labelbebida2">Bebida 2</span></td>
<td>
<select name="bebida2" class="campoTexto">
<option value="">Selecione a Bebida</option>
<option value="1">Cerveja</option>
<option value="2">Tequila</option>
</select>
</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td><span id="labelpetisco0">Petisco 0</span></td>
<td>
<select name="petisco0" class="campoTexto">
<option value="">Selecione o Petisco</option>
<option value="1">Bolinho de bacalhau</option>
<option value="2">Batata frita</option>
</select>
</td>
</tr>
<tr>
<td><span id="labelpetisco1">Petisco 1</span></td>
<td>
<select name="petisco1" class="campoTexto">
<option value="">Selecione o Petisco</option>
<option value="1">Bolinho de bacalhau</option>
<option value="2">Batata frita</option>
</select>
</td>
</tr>
<tr>
<td><span id="labelpetisco2">Petisco 2</span></td>
<td>
<select name="petisco2" class="campoTexto">
<option value="">Selecione o Petisco</option>
<option value="1">Bolinho de bacalhau</option>
<option value="2">Batata frita</option>
</select>
</td>
</tr>
</table>
</form>

</body>
</html>