'll describe and post the code. Like you can see in the post above, I have three textbox, but only one can be functional at the time. And I need that the validation occurs only on submit and only with one button. I added everything they say we need, like Class
cancel to the buttons I don't want to do validation. And I added
onfocusout:false, and
onkeyup:false to make only the
onsubmit validating.
If I put
onfocus: false, don't do any validation at all. And the class don't cancel the validation. Don't know what to do.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="Consulta.aspx.cs" Inherits="SubstituindoAjaxToolkitPorJQuery.Page.Consulta"
ClientIDMode="Inherit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.9.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
ignore: ':hidden, [readonly=readonly]'
});
$(document).ready(function () {
$.validator.addMethod('exactLength', function (field, element, param) {
//remove qualquer elemento além de texto
var texto = field;
$.each(texto, function (index, value) {
texto = texto.replace(/[_\/\.-]/g,"");
});
return this.optional(element) || texto.length == param;
}, "Please enter exactly characterers.");
$('div#messageBox1').hide();
var validator = $('#form1').validate({
debug: true,
onkeyup: false,
onfocusout: false,
rules: {
<%=txtA.UniqueID%>:{
exactLength: 7,
required: true
},
<%=txtB.UniqueID%>: {
exactLength: 14,
required: true
},
<%=txtC.UniqueID%>: {
exactLength: 8,
required: true
}
},
messages: {
<%=txtA.UniqueID%>: {
required: "Digite",
exactLength: "A deve conter 7 digits"
},
<%=txtB.UniqueID%>: {
required: "Digite",
exactLength: "B deve conter 14 digits"
},
<%=txtC.UniqueID%>: {
required: "Digite",
exactLength: "C deve conter 8 digits"
}
},
highlight: function(element, errorClass, validClass){
$(element).css({background: 'red', opacity: 0.3})
},
unhighlight: function(element, erroClass, validClass){
$(element).css({opacity: 1.0})
},
errorContainer: "#messageBox1",
errorLabelContainer: "#messageBox1 ul",
wrapper: "li", debug:true,
});
$('#btnGerar').click(function(){
validator.resetForm();
});
$('#btnConsultar').attr('disabled', true);
$('.pesquisa').live('focus', function () {
$(this).prop('readonly', false);
$(this).removeAttr('style');
$('#btnConsultar').attr('disabled', false);
campo = $('.pesquisa');
indice = campo.index(this);
$('.pesquisa').each(function () {
if (campo.index(this) != indice) {
$(this).css({
background: '#e8e8e8'
});
$(this).prop('readonly', true);
$(this).val("");
}
});
});
$('.textbox').live('click', function () {
$('.validator').css({ display: "none" });
});
$('.botao').live('click', function () {
if ($('#form1').valid()) {
return true;
}
return false;
$('.desabilitar').attr('disabled', true);
});
});
jQuery(function ($) {
$("#txtB").mask("99.999.99-9999/999");
$('#txtA').mask("9999-99/9");
$('#txtC').mask("99.99.99.99");
});
</script>
<style>
#messageBox1
{
color: Red;
}
</style>
<table cellpadding="2" cellspacing="10" class="tabelaFormulario">
<tbody>
<tr>
<th colspan="3">
<p>
Consulta</p>
</th>
</tr>
<tr>
<td>
<p>
A:
</p>
<asp:TextBox ID="txtA" CssClass="textbox campoPequeno pesquisa desabilitar" runat="server"
AutoPostBack="false" ClientIDMode="Static"></asp:TextBox>
</td>
<td>
<p>
B:
</p>
<asp:TextBox ID="txtB" CssClass="textbox campoPequeno pesquisa desabilitar" runat="server"
ClientIDMode="Static" AutoPostBack="false"></asp:TextBox>
</td>
<td>
<p>
C:
</p>
<asp:TextBox ID="txtC" CssClass="textbox campoPequeno pesquisa desabilitar"
runat="server" AutoPostBack="false" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<div class="barraBotoes" dir="rtl">
<asp:Button ID="btnConsultar" runat="server" CssClass="btPadrao desabilitar botao"
Text="Consultar" ClientIDMode="Static" OnClick="Button_Click" />
<asp:Button ID="btnGerar" runat="server" CssClass="btPadrao desabilitar botao"
Text="Gerar" />
<asp:Button ID="btnLimpar" runat="server" CssClass="btPadrao desabilitar botao" Text="Limpar" />
</div>
<br />
<asp:Label ID="lblTeste" runat="server" Text=""></asp:Label>
<div id="messageBox1" class="msg_erro" dir="ltr" style="width: 20%">
<ul>
</ul>
</div>
<br />
<br />
</asp:Content>
I'm asking this on asp.net page as well but no sucess.
Link: