I have a code that does a validation with jquery validate and is 100% functional.
When validation occurs, jQuery Validate always displays what is written in the title of input field. How do I have different validations for some fields, how do I display the correct validation message? As always, the message that is in the title field is displayed.
HTML
<table>
<tr>
<td><label for="numeroContrato">N. Contrato:</label></td>
<td><input type="text" id="numeroContrato"
name="numeroContrato" class="input-medium"
placeholder="Numero do Contrato" maxlength="10"
title="Preencha o campo Número do Contrato" />
</td>
<td></td>
</tr>
<tr>
<td><label for="dataInicial">Data Inicial:</label></td>
<td><input type="text" name="dataInicial" value=""
placeholder="Data Inicial" style="width: 150px"
title="Preencha o campo Data Inicial"> <script
type="text/javascript">
$(function() {
$('*[name=dataInicial]').appendDtpicker({
"closeOnSelected" : true,
"calendarMouseScroll" : false,
"minuteInterval" : 15,
"autodateOnStart" : false
});
});
</script></td>
<td></td>
</tr>
JAVASCRIPT
jQuery(document)
.ready(
function() {
//adicionavalidacaoCPF();
adicionaValidacaoComparacaoDatas();
adicionaValidacaoDateBR();
var validator = $("#ajax_form_inclusao")
.validate(
{
debug : true,
errorElement : "em",
errorContainer : $("#warning, #summary"),
errorPlacement : function(error,
element) {
error.appendTo(element.parent("td")
.next("td"));
},
success : function(label) {
label.text("ok!").addClass(
"success");
},
rules : {
numeroContrato : {
required : true
},
dataInicial : {
required : true,
dateBR : true
},
dataFinal : {
required : true,
dateBR : true
},
valorPF : {
required : true,
number: true
},
qtdPFContratado : {
required : true,
number: true
},
status : {
required : true
}
},
submitHandler : function(form) {
EDIT 1:
Marcelo, your suggestion worked perfectly. However I am now having difficulty positioning the message to the right of the field.
See the codes:
HTML
<form class="form-horizontal" method="post" action="" role="form"
id="ajax_form_inclusao">
<div id="alert_placeholder"></div>
<input type="hidden" name="acao" value="incluirContrato" />
<div class="control-group">
<label for="numeroContrato">N. Contrato:</label> <input type="text"
class="form-control" id="numeroContrato" name="numeroContrato"
placeholder="Numero do Contrato" maxlength="10" /><br />
<label for="error" class="error"></label>
</div>
<div class="control-group">
<label for="dataInicial">Data Inicial:</label>
<div class="input-group">
<input type="text" id="dataInicial" name="dataInicial"
class="form-control" value="" placeholder="Data Inicial"
style="width: 150px" /><br />
<script type="text/javascript">
$(function() {
$('*[name=dataInicial]').appendDtpicker({
"closeOnSelected" : true,
"calendarMouseScroll" : false,
"minuteInterval" : 15,
"autodateOnStart" : false
});
});
</script>
<label for="error" class="error"></label>
</div>
</div>
<div class="control-group">
<label for="dataFinal">Data Final:</label>
<div class="input-group">
<input type="text" id="dataFinal" name="dataFinal"
class="form-control" value="" placeholder="Data Final"
style="width: 150px" /><br />
<script type="text/javascript">
$(function() {
$('*[name=dataInicial]').appendDtpicker({
"closeOnSelected" : true,
"calendarMouseScroll" : false,
"minuteInterval" : 15,
"autodateOnStart" : false
});
});
</script>
<label for="error" class="error"></label>
</div>
</div>
<div class="control-group">
<label for="valorPF">Valor do PF:</label> <input type="text"
class="form-control" id="valorPF" name="valorPF"
placeholder="Valor do PF" maxlength="10" /><br />
<label for="error" class="error"></label>
</div>
<div class="control-group">
<label for="qtdPFContratado">Qtde. de PF Contratado:</label> <input
type="text" class="form-control" id="qtdPFContratado"
name="qtdPFContratado" placeholder="Quantidade de PF"
maxlength="20" /><br />
<label for="error" class="error"></label>
</div>
<div class="control-group">
<label for="status">Status:</label> <select name="status"
class="status" id="status">
<option value="">-- Selecione --</option>
<option value="A">Ativo</option>
<option value="I">Inativo</option>
</select><br />
<label for="error" class="error"></label>
</div>
<div class="modal-footer">
<a href="#" class="limpar"><button type="reset" class="btn">Limpar</button>
</a>
<button type="submit" class="btn btn-primary" value="Salvar">Salvar</button>
</div>
</form>
JAVASCRIPT:
var validator = $("#ajax_form_inclusao")
.validate(
{
rules : {
numeroContrato : {
required : true
},
dataInicial : {
required : true,
dateBR : true
},
dataFinal : {
required : true,
dateBR : true
},
valorPF : {
required : true,
number: true
},
qtdPFContratado : {
required : true,
number: true
},
status : {
required : true
}
},
messages: {
numeroContrato: {
required: "Campo N. Contrato é requerido",
number: "Campo N. Contrato tem que ser numerico"
},
dataInicial: {
required: "Campo Data Inicial é requerido",
dateBR: "Campo Data Inicial inválido"
},
dataFinal: {
required: "Campo Data Final é requerido",
dateBR: "Campo Data Final inválido"
},
valorPF: {
required: "Campo Valor PF é requerido",
number: "Campo Valor PF tem que ser numerico"
},
qtdPFContratado: {
required: "Campo qtdPFContratado é requerido",
number: "Campo qtdPFContratado tem que ser numerico"
},
status: {
required: "Campo Status é requerido"
}
},
highlight: function(element){
$(element).closest('.erro').removeClass('has-success').addClass('has-error');
},
success: function(element) {
$(element).closest('.erro').removeClass('has-error').addClass('has-success');
$(element).remove();
},
submitHandler : function(form) {