<!DOCTYPE html>
<html lang="en">
<head>
	<script src="../lib/jquery.js"></script>
	<script src="../dist/jquery.validate.js"></script>
	
	<style>
		form.cmxform label.error{
			color: red;
			font-style: italic;
		}
		.classErro{
			color: red; 
			font-style: italic; 
			background-color: #FFDAB9;
			width: 300px;
		}
	</style>
	
	<script>
	/* Sucesso ao validar*/
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});
	/* Regras de negocios*/
	$().ready(function() {
		$("#commentForm").validate({
				rules: {
					name: {
						required: true,
						minlength: 20,
					},
					cpf:{
						required: true,
						minlength: 11,
						number: true,
						
					},
					nmat:{
						required: true,
						minlength: 11,
						number: true,
					},
					tvinculo:{
						required: true
					},
					tipoBeneficiario:{
                        selectcheck: true
                    },
					
					
				},
				messages: {
					name: {
						required: "Por favor preencha o campo Nome <br>",
						minlength: "O campo Nome minimo de caracteres  20 <br>"
					},
					cpf: {
						required: "Por favor preencha o campo CPF<br>",
						minlength: "O campo CPF minimo de caracteres  11 <br>",
						number: "somente numeros <br>"
					},
					nmat: {
						required: "Por favor preencha o campo Matricula<br>",
						minlength: "O campo Matricula minimo de caracteres  20 <br>",
						number: "somente numeros <br>"
					},
					tvinculo:{
						required: "Por favor preencha o campo Tipo de Vinculo<br>"
					},
					
				},
				
				//Monta a mensagem em uma caixa separada
				errorLabelContainer: $('#mensagens')
		});
		
		 jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '0');
    }, " Vinculo Beneficiario");
		
	});
	</script>
	
	
</head>	

<body>
	
	<div id="mensagens" class="classErro"></div>

	<div>
		
		<form class="cmxform" id="commentForm" method="get" action="">
			<fieldset>
				<p>
					<label for="rd-sexo">Tipo Vinculo</label><br>
					<label>Titular</label><input id="tvinculo" type="radio" name="tvinculo" value="1" /><br>
					<label>Dependente</label><input id="tvinculo" type="radio" name="tvinculo" value="2" />
					
				</p>
				
				<p>
					<label for="name">Nome Beneficiario: </label>
					<input id="name" name="name" type="text" >
				</p>
				
				<p>
					<label for="cpf">CPF:</label>
					<input id="cpf" type="cpf" name="cpf">
				</p>
				<p>
					<label for="nmat">Numero Matricula:</label>
					<input id="nmat" name="nmat" />
				</p>
								
				<p>
					<label>Vinculo Beneficiario:  </label>  <span>*</span>
					<div class="">
						<select name="tipoBeneficiario">
							<option value="0">Selecione</option>
							<option value="1">Esposa</option>
							<option value="2">Filho</option>
							<option value="3">Mãe/Pai</option>
							<option value="4">Compannheira(o)</option>
						</select>
					</div>  
				</p>
				
				<p>
					<input class="submit" type="submit" value="Submit">
				</p>
				
				
			</fieldset>
		</form>
	</div>

</body>

</html>