Validar TextField Multi Line

Dhio · Agosto 20, 2009

Um olá e boa tarde,

Eu tenho uma dúvida um pouco urgente, se alguém poder me ajudar até as 14:00 ou 15:00 agradeço muito. Bem eu estou tentando validar um campo mais com 4 linhas onde você seleciona as 4 palavras nas 4 linhas, pode selecionar uma, duas ou mais segurando o ctrl. Só que não consigo validar para que o usuário pelo menos selecione uma linha, até coloquei código de validação de TextField e List/Menu, mais não vai e lembrando não quero o Multi Line do textarea, não é um campo para escrever e sim selecionar(Com opção de selecionar mais de uma linha).

Meu código:

<tr>
    <td width=278 height="163" align=center bgcolor="#ed873f" class= bordercolor="#999999">
      <p><FONT face="Tahoma" size=1 color="#FFFFFF" align=center><b>Campo Obrigatório:</b></FONT><br><FONT face="Tahoma" size=1 color="#FFFFFF">(Se desejar selecionar mais de uma alternativa, utilize a tecla 'Ctrl')</FONT>        </p>
      </div></td>
    <td width="268" bordercolor="#999999" bgcolor="#c92b00" align=center><FONT align=center>
      <select name=Trabalho class=InputText size=1 id="Trabalho" multiple="multiple" style=width:250px>
      <option value="Promotor(a) de vendas">Promotor(a) de vendas</option>
      <option value="Coordenador(a) de equipe">Coordenador(a) de equipe</option>
      <option value="Serviços de apoio">Serviços de apoio</option>
      <option value="Serviços de entrega de folhetos">Serviços de entrega de folhetos</option>
    </select></font></td>
  </tr>

Olha as validações que já coloquei:

if(isEmpty(document.form.Trabalho[document.form.Trabalho.selectedIndex].value)){
       AvisoErroCampo_SelectBox(document.form.Trabalho,'Selecione um campo.');
    return false;
 }

if(isEmpty(document.form.Trabalho.value)){
    AvisoErroCampo(document.form.Trabalho,'Selecione um campo.');
    return false;
 
 }

Essas validações funcionam só não funciona para o TextField Multi Line que descrevi acima.

Obrigado.

klonder · Agosto 20, 2009

Você postou o mesmo tópico 3x, todos na data de hoje, às 11:45h, outro às 11:51h e esse às 11:56h.

Por favor, não cometa flood no fórum.

Para maiores detalhes, veja a 10ª regra do fórum no link:

http://forum.imasters.com.br/index.php?app=core&module=help

Os outros tópicos não foram respondidos e serão excluídos.

Att,

klonder

-----------------------------------------------------

Sobre a sua dúvida:

Por que você não faz isso com checkbox, facilitando todo o processo?

Dhio · Agosto 20, 2009

Não foi a intenção, mais não percebi ter postado três topicos, é que as duas primeiras vezes estava demorando a ser postado o topico e então fechei a janela, mais não pensei que no final tinha criados esses dois topicos que não foi concluido na janela que fechei. Só a terceira vez que eu vi o topico ser postado.

Agora peço por favor alguém consegue me ajudar?

klonder · Agosto 20, 2009

Para validar inputs desse tipo (multiple), você deve utilizar algumas condições em JavaScript. Nesse caso, como estamos selecionando itens, devemos utilizar "selected" em nossos blocos condicionais.

Particularmente o uso de checkboxes, nesse caso, seria mais apropriado, pois nem todos os usuários conhecem essa técnica de clicar com o CTRL e selecionar os itens desejados.

Entretanto, conforme solicitado, segue o código:

<html>
<head>
<script type="text/javascript">
var selecionados = "";
function verificar() {
var Marcados = 1;
var objCheck = document.forms["form1"].elements["Trabalho"];

if (objCheck.value == "") {
	alert("Por favor, selecione pelo menos uma opção");
	objCheck.focus();
	return false;
} else {
	for (var i=0; i<objCheck.length; i++) {
		if(objCheck[i].selected == true){
			selecionados += "» "+objCheck[i].value+"\n";
			
		}
	}
	alert("As opções selecionadas foram:\n\n"+selecionados);
	return true;
}
}
</script>
</head>
<body>

<form name="form1" action="pagina.php" method="post" onsubmit="return verificar();">
<select name="Trabalho" id="Trabalho" size="4" multiple="multiple" class="InputText" style="width:250px">
<option value="Promotor(a) de vendas">Promotor(a) de vendas</option>
<option value="Coordenador(a) de equipe">Coordenador(a) de equipe</option>
<option value="Serviços de apoio">Serviços de apoio</option>
<option value="Serviços de entrega de folhetos">Serviços de entrega de folhetos</option>
</select>
<input type="submit" value="Ver selecionados">
</form>
</body>
</html>

Dhio · Agosto 20, 2009

Realmente obrigado e desculpe o incomodo, mais não consegui, adequei o código ao meu sistema e ele não validou o TextField, passou reto como não existisse, não sei no que fiz errado mexei muito até.

Se poder ajudar, vou agradecer muito:

<table width="575" align=center cellpadding=5 cellspacing=1 bordercolor="#FFFFFF" class="margemEsquerda"  border=1>

<form name=forml method=POST action=http://www onsubmit="return verificar();">
    <input type=hidden name=NomePara>
    <input type=hidden name="recipient" value='dhrizzos@hotmail.com,criacao@imaxcomunicacao.com.br'>
    <input type=HIDDEN name="subject" value="Fale Conosco">
    <input type=hidden name="redirect" value='http://www.alphacorpus.com.br/Obrigadot.htm'>
    <input type=hidden name="OrdemCampos" value='Nome,Email,Sexo,Data_de_Nascimento,Currículo,Trabalho'>    
  
  <tr>
    <td width=278 height="163" align=center bgcolor="#ed873f" class= bordercolor="#999999">
      <p><FONT face="Tahoma" size=1 color="#FFFFFF" align=center><b>Campo Obrigatório:</b></FONT><br><FONT face="Tahoma" size=1 color="#FFFFFF">(Se desejar selecionar mais de uma alternativa, utilize a tecla 'Ctrl')</FONT>        </p>
      </div></td>
    <td width="268" bordercolor="#999999" bgcolor="#c92b00" align=center><FONT align=center>
      <select name=Trabalho class=InputText size=1 id="id="Trabalho" multiple="multiple" style=width:250px>
      <option value="Promotor(a) de vendas">Promotor(a) de vendas</option>
      <option value="Coordenador(a) de equipe">Coordenador(a) de equipe</option>
      <option value="Serviços de apoio">Serviços de apoio</option>
      <option value="Serviços de entrega de folhetos">Serviços de entrega de folhetos</option>
    </select></font></td>
  </tr>

<tr>
    <td colspan=2 align=center bgcolor="#ed873f"><input type=button name=Enviar value="Enviar" class=InputButton onclick='javascript:ValidaForm()'>  <input type="reset" name="Limpar" value="Limpar"></td>
  </tr></form>  
    
</table>

<script>
function ValidaForm(){

 //Contato Nome
 if(isEmpty(document.forml.Nome.value)){
    AvisoErroCampo(document.forml.Nome,'Informe seu nome.');
    return false;
 }
 
 

 //E-mail
 if(isEmpty(document.forml.Email.value) || !ValidaEmailInt(document.forml.Email.value)){
    AvisoErroCampo(document.forml.Email,'Informe seu e-mail.');
    return false;
 }


 // Verifica se foi escolhido Sexo
 var checkedButton=false;
 for (i=0;i<2;i++) if(document.forml.Sexo[i].checked) checkedButton=true;
 if (!checkedButton) {
   alert("Escolha um dos sexos.");
   document.forml.Sexo[0].focus();
   return false;
 }
 



 //Data de Nascimento
 if(isEmpty(document.forml.Data_de_Nascimento.options[document.forml.Data_de_Nascimento.selectedIndex].value)){
       AvisoErroCampo_SelectBox(document.forml.Data_de_Nascimento,'Informe a Data de Nascimento.');
    return false;
 }
 //Data de Nascimento
 if(isEmpty(document.forml.Data_de_Nascimento1.options[document.forml.Data_de_Nascimento1.selectedIndex].value)){
       AvisoErroCampo_SelectBox(document.forml.Data_de_Nascimento1,'Informe a Data de Nascimento.');
    return false;
 }
 //Data de Nascimento
 if(isEmpty(document.forml.Data_de_Nascimento2.options[document.forml.Data_de_Nascimento2.selectedIndex].value)){
       AvisoErroCampo_SelectBox(document.forml.Data_de_Nascimento2,'Informe a Data de Nascimento.');
    return false;
	
 }
 


//Curriculo
 if(isEmpty(document.forml.Currículo.value)){
    AvisoErroCampo(document.forml.Currículo,'O Currículo não pode estar em branco.');
    return false;
 }
 //Trabalho
var selecionados = "";
function verificar() {
var Marcados = 1;
var objCheck = document.forms["form1"].elements["Trabalho"];

if (objCheck.value == "") {
        alert("Por favor, selecione pelo menos uma opção");
        objCheck.focus();
        return false;
} else {
        for (var i=0; i<objCheck.length; i++) {
                if(objCheck[i].selected == true){
                        selecionados += "» "+objCheck[i].value+"\n";
                        
                }
        }
        alert("As opções selecionadas foram:\n\n"+selecionados);
        return true;
}
}
 
 document.forml.submit();
}

function ValidaEmailInt(sEmail) {
  var regex=/^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
  return regex.test(sEmail);
}

function retiraEspaco(theString) {
//retira espaços de string
  if(theString.indexOf(" ")>=0){
    var i=0;
    while(theString.indexOf(" ")>=0){
      if(theString.charAt(i)==" ")theString=theString.substring(0,i)+theString.substring(i+1,theString.length);
      else i++;
    }
    newString=theString;
  } 
  else newString=theString;
  return newString;
}

function isEmpty(s){return((retiraEspaco(s)==null)||(retiraEspaco(s).length==0));}

function AvisoErroCampo(theField,warnText){
  theField.focus();
  theField.select();
  alert(warnText);
  return false;
}

function AvisoErroCampo_SelectBox(theField,s){
  theField.focus();
  alert(s);
  return false;
}
</script>

klonder · Agosto 20, 2009

Eu não entendo algumas coisas:

 //Contato Nome
 if(isEmpty(document.form1.Nome.value)){
    AvisoErroCampo(document.form1.Nome,'Informe seu nome.');
    return false;
 }

Por que você não altera o código acima para:

 //Contato Nome
 if(document.form1.Nome.value == ""){
    alert("Informe seu nome.");
    document.form1.Nome.focus();
    return false;
 }

Além disso, alguns campos não foram criados. Desse modo, o JavaScript dá erro por não encontrá-los.

Outro fato importante: form1 (form um) é diferente de forml (form L ou ele).

Dhio · Agosto 21, 2009

Que campos? Bem coloquei tudo form, para não confundir l com 1. E o seu nome que disse, por mais que antes funcionava também o outro.

Mais ele nem da erro, como disse quando vou no enviar ele já entra na página obrigado, como não tivesse código.

Obrigado.

klonder · Agosto 22, 2009

Durante a execução, está dando erro na linha 33:

if(isEmpty(document.form1.Nome.value)) {

Verifique se esse input está recebendo dados adequadamente.

Arquivado

Validar TextField Multi Line

Recommended Posts

Dhio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dhio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dhio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dhio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante