Edição de campo tipo telefone.
Preciso de ajuda com a opção "+" e "-" no campo telefone que estou criando, podem me ajudar?
Preciso criar um campo telefone na validação de cadastro em HTML e não estou conseguindo.
Este campo tem que ter a opção de + e - para que o usuario possa acrescentar mais numeros ou remover na hora do cadaastro.
O problema é que eu consegui fazer funcionar criando somente a parte do telefone, quando junto com os outros codigos e demais campos do cadastro ele para de funcionar
ficando sem ação nenhuma as opções + e -
CODIGO COMPLETO DO MEU FORMULARIO
<!DOCTYPE html>
<html>
<body>
<title>Ficha de Cadastramento</title>
<h3> Teste de validação de formulário</h3>
<script type="text/javascript">
function validarSenha(){
senha = document.f1.senha.value;
senha2 = document.f1.senha2.value;
if(senha != senha2) {
alert("Senhas diferentes!");
return false; } }
function validarCPF(strCPF) {
var Soma, Resto, borda_original;
Soma = 0;
if (strCPF == "00000000000"){
document.getElementById("cpf").setCustomValidity('CPF invalido!');
return false;
}
for (i=1; i<=9; i++){
Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (11 - i);
}
Resto = (Soma * 10) % 11;
if ((Resto == 10) || (Resto == 11)){
Resto = 0;
}
if (Resto != parseInt(strCPF.substring(9, 10))){
document.getElementById("cpf").setCustomValidity('CPF invalido!');
return false;
}
Soma = 0;
for (i = 1; i <= 10; i++){
Soma = Soma + parseInt(strCPF.substring(i-1, i)) * (12 - i);
}
Resto = (Soma * 10) % 11;
if ((Resto == 10) || (Resto == 11)){
Resto = 0;
}
if (Resto != parseInt(strCPF.substring(10, 11))){
document.getElementById("cpf").setCustomValidity('CPF invalido!');
return false;
}
document.getElementById("cpf").setCustomValidity('');
return true;
}
function duplicarcampos(){
var clone = document.getElementById('origem').cloneNode(true);
var destino = document.getElementById('destino');
destino.appendChild (clone);
var camposClonados = clone.getElementsByTagName('input');
for(i=0; i<camposClonados.length;i++){
camposClonados[i].value = '';
}
}
function removerCampos(id){
var node1 = document.getElementById('destino');
node1.removeChild(node1.childNodes[0]);
}
</script>
<form action="" name="f1" onsubmit="return validarSenha()" onsubmit="return validarCPF()">
<p> Nome:
<input type="text" name="Nome:"> </p>
<p> Senha:
<input type="senha" name="senha" id="senha"> </p>
<p> Confirmar senha:
<input type="senha2" name="senha2" id="senha2"> </p>
<p> CPF:
<input id="cpf" name="cpf" required="required" pattern="[0-9]+$" maxlength="11" size="11" placeholder="000.000.00.00" onblur="validarCPF(this.value)"/> </p>Endereço (rua e número):
<input type="text" name="Endereco" id="endereco" placeholder="ex.: Rua Abc, 100" >
<button type="button">Pesquisar CEP</button>
CEP <input type="text" name="cep" id="cep" />
<p> Renda Pessoal (Em reais):
<input type="text" name="renda" id="renda"> </p>
<p> Quantidade de CDs (R$1,50 cada):
<input type="number" name="quantidade" id="quantidade"> </p>
<p> Valor Total:
<input type="text" name="total" id="total" disabled=""> </p>
<p> Forma de Pagamento:
<select> id=Fpagamento
<option>A vista</option>
<option>Parcelado</option>
</select>
<p><div id="origem">
Telefone:
<input type="text" id="fone" name="fone[]" maxlength="14" size="14"/>
<input name="" value="+" type="button" style="cursor: pointer" onclick="duplicarCampos()">
<input name="" value="-" type="button" style="cursor: pointer" onclick="removerCampos()"></p></div>
<div id="destino">
</div>
<p>
<input type="submit" name="Enviar" onclick="validarSenha()" onclick="validarCPF()">
</form></p>
</html>
</body>COGIGO SEPARADO DO CAMPO TELEFONE
NÃO QUERO USAR O BOTAO COM IMAGEM, QUERO USAR COM O BOTAO PADRAO , COMO FAZ ?
<!DOCTYPE html>
<html>
<body>
<title>Ficha de Cadastramento</title>
<h3> Teste de validação de formulário</h3>
<script type="text/javascript">
function duplicarCampos(){
var clone = document.getElementById('origem').cloneNode(true);
var destino = document.getElementById('destino');
destino.appendChild (clone);
var camposClonados = clone.getElementsByTagName('input');
for(i=0; i<camposClonados.length;i++){
camposClonados[i].value = '';
}
}
function removerCampos(id){
var node1 = document.getElementById('destino');
node1.removeChild(node1.childNodes[0]);
}
</script>
<div id="origem" align="center">
Fone <input type="text" id="fone" name="fone[]" maxlength="14" size="14"/>
<img src="mais.png" style="cursor: pointer;" onclick="duplicarCampos();" width="20" height="20">
<img src="menos.png" style="cursor: pointer;" onclick="removerCampos(this);" width="20" height="20">
</div>
<div id="destino">
</div>
</body>
</html>Discussão (0)
Carregando comentários...