Resetar Um Único Campo Input Do Formulário

Olá! Tenho um formulário de cadastro de clientes que possui alguns campos de imput text. Estou precisando apagar o conteúdo e as mensagens de erro e resetar o css de erro e sucesso da validação padrão do Yii, que é feita com ajax,de apenas alguns campos deste formulário. Em meu formulário há um botão para limpar os campos:


<?php echo CHtml::resetButton('Limpar',array('id'=>'resetar')); ?>

Ao clicar nele o formulário inteiro é limpo, e não é isso que procuro. alguém tem alguma dica?

A minha View:


<?php

/* @var $this ClienteController */

/* @var $model Cliente */

/* @var $form CActiveForm */

?>

<?php


Yii::app()->clientScript->registerScript('teste1', "




$('#Cliente_tipo').change(

	function(){

		var selecionado=$('#Cliente_tipo option:selected').val();

		

		if(selecionado==0){			

			$('#pessoa_juridica').hide();

			$('#pessoa_fisica div').removeClass('row success');

			$('#pessoa_fisica div').removeClass('row error');			

			$('#pessoa_fisica').fadeToggle();

                        $('#pessoa_fisica div input').val('');

		}

				

		if(selecionado==1){		

			$('#pessoa_fisica').hide();	

			$('#pessoa_juridica div').removeClass('row success');

			$('#pessoa_juridica div').removeClass('row error');

			$('#pessoa_juridica').fadeToggle();

			$('#pessoa_juridica div input').val('');

		}		

	}

);


$('#resetar').click(function(){

	$('#pessoa_fisica').hide();

	$('#pessoa_juridica').show();	

	}

);");

?>


<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'cliente-form',

	'enableAjaxValidation'=>true,

        'enableClientValidation'=>false,

        'clientOptions'=>array(

            'validateOnSubmit'=>true

			)));?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<?php echo $form->errorSummary(array($cliente,$endereco,$estado,$email,$telefone)); ?>


	<div class="row">

		<?php echo $form->labelEx($cliente,'tipo'); ?>

		<?php 

			echo $form->dropDownList($cliente,'tipo', 

				array(

					0=>'Pessoa Física',

					1=>'Pessoa Jurídica'),

					array(

						'options'=>array(1=>array('selected'=>'selected')),						

				));

		?>		

		<?php echo $form->error($cliente,'tipo'); ?>

	</div>

	

	<div id="pessoa_juridica" >

		<div class="row">

			<?php echo $form->labelEx($cliente,'cnpj');?>

			<?php 

				$this->widget('CMaskedTextField', array(

	                'model' => $cliente,

	                'attribute' => 'cnpj',

	                'mask' => '99.999.999/9999-99',

	                'htmlOptions' => array(

					'size' => 18,

					'class'=>'required')

					));

			?>

			<?php echo $form->error($cliente,'cnpj'); ?>

		</div>


		<div class="row">

			<?php echo $form->labelEx($cliente,'razao_social'); ?>

			<?php echo $form->textField($cliente,'razao_social',array('size'=>60,'maxlength'=>255)); ?>

			<?php echo $form->error($cliente,'razao_social'); ?>

		</div>


		<div class="row">

			<?php echo $form->labelEx($cliente,'contato_comercial'); ?>

			<?php echo $form->textField($cliente,'contato_comercial',array('size'=>60,'maxlength'=>255)); ?>

			<?php echo $form->error($cliente,'contato_comercial'); ?>

		</div>

	</div>

	

	<div id="pessoa_fisica" style="display:none">

		<div class="row">

			<?php echo $form->labelEx($cliente,'cpf'); ?>

			<?php 

				$this->widget('CMaskedTextField', array(

	                'model' => $cliente,

	                'attribute' => 'cpf',

	                'mask' => '99.999.999-99',

	                'htmlOptions' => array('size' => 14 )

					));

			?>

			<?php echo $form->error($cliente,'cpf'); ?>

		</div>


		<div class="row">

			<?php echo $form->labelEx($cliente,'nome'); ?>

			<?php echo $form->textField($cliente,'nome',array('size'=>60,'maxlength'=>255)); ?>

			<?php echo $form->error($cliente,'nome'); ?>

		</div>

		

		<div class="row">

			<?php echo $form->labelEx($telefone,'celular'); ?>

			<?php 

			$this->widget('CMaskedTextField', array(

	                'model' => $telefone,

	                'attribute' => 'celular',

	                'mask' => '(99)9999-9999',

	                'htmlOptions' => array('size' => 13)

	            ));

			?>		

			<?php echo $form->error($telefone,'celular'); ?>

		</div>		

	</div>	


	<div class="row buttons">

		<?php echo CHtml::submitButton($cliente->isNewRecord ? 'Create' : 'Save'); ?>

		<?php echo CHtml::resetButton('Limpar',array('id'=>'resetar')); ?>

	</div>


<?php $this->endWidget(); ?>


</div><!-- form -->

Como percebem no cabeçalho da minha view eu fiz um script tentando resolver o problema, ele esconde e mostra os campos do formulário de forma correta porém, a parte de resetar as mensagens e as cores verde e vermelha, resultados da validação, ora funciona ora não…

Deadbody,

Você vai precisar fazer isso manual usando jQuery.

Primero muda o botão de resetButton, para htmlButton, assim ao clicar no botão ele não vai resetar seu formulário.


<?php echo CHtml::htmlButton('Limpar',array('id'=>'resetar')); ?>

Ai no seu registerScript(), faz mais ou menos assim:


$('body').on('click','button#resetar', function(){

        $('#pessoa_fisica').hide();

        $('#pessoa_juridica').show();   

    }

);

Newerton, desde já agradeço por sua contribuição. Eu vou explicar toda a situação que estou tentando resolver pois,devido a pressa, não fui muito claro, e, quem sabe, a solução que penso pode não ser a mais adequada e alguém possa propor algo mais prático, ajudando assim todos que possam passar por esse problema no futuro.

Tenho uma tabela clientes no banco. Consequentemente um CActiveRecord Cliente. Ela possui, dentre outros, os campos: CNPJ; Razão Social; CPF; Nome. Esses atributos podem ser null. Está aqui o começo do problema. Há também um campo chamado "tipo"(0=pessoa fisica, 1=pessoa juridica). O meu formulário de cadastro possui esses campos. Como forçar o usuário a cadastrar os campo CNPJ e Razão Social se for pessoa jurídica ou CPF e Nome se for pessoa física? Como fazer uma validação de formulário para isso? Pensando em poupar trabalho pensei em aproveitar a validação de formulário gerada automaticamente pelo Gii. Fiz uma alteração nas Regras de validação:


	public function rules()

	{		

		return array(

			array('cnpj,razao_social', 'required', 'on'=>'pessoa_juridica'),

			array('cpf,nome', 'required','on'=>'pessoa_fisica'),			

		);

	}

Certo, agora alterando o método beforeValidate() para que dependendo do "tipo" selecionado no formulário seja feita a validação correspondente:


	public function beforeValidate(){

		if($this->tipo==0){

			$this->setScenario('pessoa_fisica');

		}else{

			$this->setScenario('pessoa_juridica');

		}       

	}

Agora na view, no formulário:


<?php 

 

Yii::app()->clientScript->registerScript('teste1', " 

 

 

$('#Cliente_tipo').change( 

        function(){ 

                var selecionado=$('#Cliente_tipo option:selected').val(); 

                 

                if(selecionado==0){                      

                        $('#pessoa_juridica').hide(); 

                        $('#pessoa_fisica div').removeClass('row success'); 

                        $('#pessoa_fisica div').removeClass('row error');                        

                        $('#pessoa_fisica').fadeToggle(); 

                        $('#pessoa_fisica div input').val(''); 

                } 

                                 

                if(selecionado==1){              

                        $('#pessoa_fisica').hide();      

                        $('#pessoa_juridica div').removeClass('row success'); 

                        $('#pessoa_juridica div').removeClass('row error'); 

                        $('#pessoa_juridica').fadeToggle(); 

                        $('#pessoa_juridica div input').val(''); 

                }                

        } 

); 

 

$('#resetar').click(function(){ 

        $('#pessoa_fisica').hide(); 

        $('#pessoa_juridica').show();    

        } 

);"); 

?> 

 

<div class="form"> 

 

<?php $form=$this->beginWidget('CActiveForm', array( 

        'id'=>'cliente-form', 

        'enableAjaxValidation'=>true, 

        'enableClientValidation'=>false, 

        'clientOptions'=>array( 

            'validateOnSubmit'=>true 

                        )));?> 

 

        <p class="note">Fields with <span class="required">*</span> are required.</p> 

 

        <?php echo $form->errorSummary(array($cliente,$endereco,$estado,$email,$telefone)); ?> 

 

        <div class="row"> 

                <?php echo $form->labelEx($cliente,'tipo'); ?> 

                <?php  

                        echo $form->dropDownList($cliente,'tipo',  

                                array( 

                                        0=>'Pessoa Física', 

                                        1=>'Pessoa Jurídica'), 

                                        array( 

                                                'options'=>array(1=>array('selected'=>'selected')),                                              

                                )); 

                ?>               

                <?php echo $form->error($cliente,'tipo'); ?> 

        </div> 

         

        <div id="pessoa_juridica" > 

                <div class="row"> 

                        <?php echo $form->labelEx($cliente,'cnpj');?> 

                        <?php  

                                $this->widget('CMaskedTextField', array( 

                        'model' => $cliente, 

                        'attribute' => 'cnpj', 

                        'mask' => '99.999.999/9999-99', 

                        'htmlOptions' => array( 

                                        'size' => 18, 

                                        'class'=>'required') 

                                        )); 

                        ?> 

                        <?php echo $form->error($cliente,'cnpj'); ?> 

                </div> 

 

                <div class="row"> 

                        <?php echo $form->labelEx($cliente,'razao_social'); ?> 

                        <?php echo $form->textField($cliente,'razao_social',array('size'=>60,'maxlength'=>255)); ?> 

                        <?php echo $form->error($cliente,'razao_social'); ?> 

                </div> 

 

                <div class="row"> 

                        <?php echo $form->labelEx($cliente,'contato_comercial'); ?> 

                        <?php echo $form->textField($cliente,'contato_comercial',array('size'=>60,'maxlength'=>255)); ?> 

                        <?php echo $form->error($cliente,'contato_comercial'); ?> 

                </div> 

        </div> 

         

        <div id="pessoa_fisica" style="display:none"> 

                <div class="row"> 

                        <?php echo $form->labelEx($cliente,'cpf'); ?> 

                        <?php  

                                $this->widget('CMaskedTextField', array( 

                        'model' => $cliente, 

                        'attribute' => 'cpf', 

                        'mask' => '99.999.999-99', 

                        'htmlOptions' => array('size' => 14 ) 

                                        )); 

                        ?> 

                        <?php echo $form->error($cliente,'cpf'); ?> 

                </div> 

 

                <div class="row"> 

                        <?php echo $form->labelEx($cliente,'nome'); ?> 

                        <?php echo $form->textField($cliente,'nome',array('size'=>60,'maxlength'=>255)); ?> 

                        <?php echo $form->error($cliente,'nome'); ?> 

                </div> 

                 

                <div class="row"> 

                        <?php echo $form->labelEx($telefone,'celular'); ?> 

                        <?php  

                        $this->widget('CMaskedTextField', array( 

                        'model' => $telefone, 

                        'attribute' => 'celular', 

                        'mask' => '(99)9999-9999', 

                        'htmlOptions' => array('size' => 13) 

                    )); 

                        ?>               

                        <?php echo $form->error($telefone,'celular'); ?> 

                </div>           

        </div>   

 

        <div class="row buttons"> 

                <?php echo CHtml::submitButton($cliente->isNewRecord ? 'Create' : 'Save'); ?> 

                <?php echo CHtml::resetButton('Limpar',array('id'=>'resetar')); ?> 

        </div> 

 

<?php $this->endWidget(); ?> 

 

</div><!-- form -->

Esse formulário possui uma dropdownlist onde o usuário seleciona qual o tipo de cliente, físico ou jurídico. Dependendo de sua escolha o script mostra os campos pertinentes e esconde os inúteis e ao mesmo tempo o Scenário do model cliente é trocado segundo a sua escolha para que a validação correspondente seja feita. Lembrando que a validação do form é feita segundo o que o Gii gerou, mensagens de erro são vermelhas de sucesso são verdes tudo default. Até aqui tudo certo, tudo funcionando. Agora inicia a parte problemática: Quando eu seleciono um tipo de cliente pessoa jurídica, por exemplo, e começo a preencher os campos, como a validação ajax está abilitada a medida que eu vou preenchendo ele vai validando então se tiver erro os campos vão ficando vermelhos. Por outro lado os campos referentes a pessoa física que estão ocultos vão ficando verdes já que, como escolhi o tipo pessoa jurídica e segundo as minhas rules() esses campos só são required no scenario pessoa fisica.Se nesse momento, eu aperto o dropdownlist e troco o tipo de cliente os campos ocultos de pessoa fisica aparecem valdidados com verde. É aqui que eu preciso de ajuda. Como limpar o conteúdo e as mensagens e cores de erro ou sucesso desses campos que estavam ocultos para que fiquem limpos e prontos para serem preenchidos e validados novamente ?

Essa foi a forma que eu tentei solucionar a situação, está quase tudo funcionando. Se alguem tiver alguma outra forma de resolver isso, poste! Desde já agradeço…

Deadbody,

Agora fico fácil e moleza.

Por que o campo Nome ta NULL? Usa ele como Nome Fantasia da Empresa também, assim ele sempre será obrigatório.

Vamos a limpeza dos campos, conforme a seleção do <select>, eu peguei a sua função do primeiro post e incrementei e removi alguns itens




$('body').on('change', 'select#Cliente_tipo', function(){

	var id = $(this).val();

	console.log(id); // pelo firebug veja se esta mostrando o id selecionado

	

	if(ide == 0){

		$('#pessoa_juridica').hide(); 

		$('#pessoa_fisica div.row').removeClass('success'); 

		$('#pessoa_fisica div.row').removeClass('error');                        

		$('#pessoa_fisica').fadeToggle(); 

		$('#pessoa_fisica input').val(''); 

	} else if(id == 1){

		$('#pessoa_fisica').hide();      

		$('#pessoa_juridica div.row').removeClass('success'); 

		$('#pessoa_juridica div.row').removeClass('error'); 

		$('#pessoa_juridica').fadeToggle(); 

		$('#pessoa_juridica input').val(''); 

	}      

});



Depois fala pra mim o que está sumindo e aparecendo, por que pela essa função acima deve funcionar.

Pegando a ideia, dá pra fazer o seguinte…

Adiciona uma classe qualquer nos campos do formulário, por exemplo… pFisica (para os campos e/ou divs exclusivo das pessoas) e pJuridica (para os campos e/ou divs exclusivo das empresas).




    $('body').on('change', 'select#Cliente_tipo', function() {

        $('.success').each(function() {

            $(this).removeClass('success');

            $(this).val('');

        });


        $('.error').each(function() {

            $(this).removeClass('error');

            $(this).val('');

        });


        /*

         * Assim não tens de adicionar campo a campo e

         * caso adicione um novo campo após um tempo,

         * ele já vai estar dentro desta validação.

         */


         // Lembre-se de fazer o hide e o toggle das divs aqui.

    });



Lothor, obridado por contribuir. Com certeza a sua dica é boa, se eu fizesse minhas proprias classes eu teria mais liberdade, não dependeria tanto da lógica de validação gerada automaticamente pelo Gii, porém ainda não tenho conhecimento suficiente, estou estudando tudo de uma vez só: PHP, Javascript, Jquery, mysql, Yii e estou no começo da "batalha" ainda.

Newerton, funcionou! nem acredito, eu já estava quase desistindo e fazendo dois formulários separados. Agora, com o seu código, ele reseta o conteúdo e os estilo de erro e sucesso dos campos. Usando a sua lógica eu incluí mais 02 linhas de código para que os textos informativos sobre o erro também fossem apagados. Agora sim ficou exatamente como eu queria. Segue como ficou finalmente:


$('body').on('change', 'select#Cliente_tipo', function(){

        var id = $(this).val();        

		console.log(id); // pelo firebug veja se esta mostrando o id selecionado (Aqui ele mostrou certinho o id do tipo selecionado!)                

		if(id == 0){                

			$('#pessoa_juridica').hide();                 

			$('#pessoa_fisica div.row').removeClass('success');                 

			$('#pessoa_fisica div.row').removeClass('error'); 

			$('#pessoa_fisica div.row div.errorMessage').text('');                                       

			$('#pessoa_fisica').fadeToggle();                 

			$('#pessoa_fisica input').val('');         

		} else if(id == 1){                

			$('#pessoa_fisica').hide();                      

			$('#pessoa_juridica div.row').removeClass('success');                 

			$('#pessoa_juridica div.row').removeClass('error');                 

			$('#pessoa_juridica div.row div.errorMessage').text('');                 

			$('#pessoa_juridica').fadeToggle();                 

			$('#pessoa_juridica input').val('');

		}    

});


$('#resetar').click(function(){

	$('#pessoa_fisica').hide();

	$('#pessoa_juridica').show();	

	}

);

Obrigado a todos…

Deadbody,

Agora sim, cliente feliz, patrão feliz! kkkkkk

Olá! O script acima funciona perfeitamente no Firefox. No Internet Explorer ele não esconde a div e não retorna nenhuma mensagem de erro. Será que há algum erro de lógica, ou algum seletor que o IE não reconhece ?

Deadbody,

Me fala quais dessas linhas o IE não executa:




$('#pessoa_juridica').hide();                 

                        $('#pessoa_fisica div.row').removeClass('success');                 

                        $('#pessoa_fisica div.row').removeClass('error'); 

                        $('#pessoa_fisica div.row div.errorMessage').text('');                                       

                        $('#pessoa_fisica').fadeToggle();                 

                        $('#pessoa_fisica input').val('');



Qual IE ta usando?

Ola! Estou usando o IE9. Eu consegui resolver. Testei todos os camandos separadamente e eles funcionaram, OMFG!! então fui remontanto o script e executando aos pedaços e descobri que o problema estava nesta linha:


console.log(id); // pelo firebug veja se esta mostrando o id selecionado (Aqui ele mostrou certinho o id do tipo selecionado!)

Eu apenas removi ela e tudo funcionou perfeitamente tanto do IE9 quanto no Firefox.

Obrigado…

Pior, console.log() só funcionar no Firefox kkkkkkkkkkkk

Acho que no crome também funciona.

No Ieca que não funciona nada hehe

Já perdi muito tempo com o console.log() no Internet Explorer,

agora nunca mais esqueço, antes de liberar para testes,

comento todos eles :D