0

Estou querendo duas coisas são: botão ativado quando os campos forem preenchidos OU tornar obrigatórios nos campos (required), isso eu coloquei o required nos campos input, ao clique Salvar/Continuar, simplesmente ele continuou sem obrigar a responder todos. Pois esse HTML veio com padrão sem obrigar os campos, apenas Pular ou Salvar Veja o código em baixo:

<div class="add-photo sun_startup">
    <div class="text-center">
        <h2><img src="https://img.icons8.com/dusk/64/000000/badge.png" width="40" height="40"/> <?php echo $wo['lang']['tell_us'];?></h2>
        <h4><?php echo $wo['lang']['tell_us_des'];?></h4>
        <form class="setting-general-form form-horizontal row" method="post">
            <div class="col-md-3 col-sm-2"></div>
            <div class="col-md-6 col-sm-8">
                <!-- Text input-->
                <div class="row">
                    <div class="col-sm-6">
                        <div class="sun_input">
                            <input id="first_name" name="first_name" type="text" required class="form-control input-md" placeholder="<?php echo $wo['lang']['first_name']; ?>" value="<?php echo $wo['user']['first_name']?>" autocomplete="off" autofocus> 
                            <label for="first_name"><img src="https://img.icons8.com/office/30/000000/rename.png" width="25" height="25"/> <?php echo $wo['lang']['first_name']; ?></label>  
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="sun_input">
                            <input name="last_name" id="last_name" type="text" required class="form-control input-md" placeholder="<?php echo $wo['lang']['last_name']; ?>" value="<?php echo $wo['user']['last_name']?>" autocomplete="off">
                            <label for="last_name"><img src="https://img.icons8.com/office/30/000000/rename.png" width="25" height="25"/> <?php echo $wo['lang']['last_name']; ?></label>  
                        </div>
                    </div>
                </div>
                <div class="sun_input">
                    <select id="country" name="country" required class="form-control">
                        <?php 
                            foreach ($wo['countries_name'] as $country_ids => $country) { 
                                $country_id = $wo['user']['country_id'];
                                $selected_contry = ($country_ids == $country_id) ? ' selected' : '' ;
                        ?>
                            <option value="<?php echo $country_ids;?>" <?php echo $selected_contry;?> ><?php echo $country;?></option>
                        <?php } ?>
                    </select>
                    <label for="country"><img src="https://img.icons8.com/plasticine/100/000000/country.png" width="25" height="25"/> <?php echo $wo['lang']['country']; ?></label>
                </div>
                <div class="sun_input">
                <!--input id="address" name="address" type="text" class="form-control input-md" value="<?php echo $wo['setting']['address'];?>" placeholder="<?php echo $wo['lang']['location']; ?>" / required-->
                <!--label  for="address"><img src="https://img.icons8.com/doodle/48/000000/user-location.png" width="27" height="27"/> <?php echo $wo['lang']['location']; ?></label-->  
            </div>              
                <div class="sun_input">
                    <input id="usr_birthday" name="birthday" type="text" class="form-control required input-md" placeholder="<?php echo $wo['lang']['birthday']; ?>" autocomplete="off" / required> 
                    <label for="usr_birthday"><img src="https://img.icons8.com/office/30/000000/birthday.png" width="25" height="25"/> <?php echo $wo['lang']['birthday']; ?></label>
                </div>
                <input type="hidden" name="user_id" value="<?php echo $wo['user']['user_id'];?>">
                <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
            </div>
            <div class="col-md-3 col-sm-2"></div>
        </form>
    </div>
    <div class="continue-button">
        <!--small class="skip-step" onclick="Wo_SkipStep('start_up_info');"><?php echo $wo['lang']['skip'];?></small-->
        <button class="btn con-button btn-main" onclick="Wo_SubmitInfoForm();"><?php echo $wo['lang']['start_up_continue'];?></button>
    </div>
    <div class="clear"></div>
</div>

Por favor me ajudem! O que sugerem para eu colocar algum JS? que reconhece bem? Eu tentei fazer igual assim https://cursos.alura.com.br/forum/topico-habitar-desabilitar-botao-65202 Mas não deu certo.

2 Respostas 2

0

Isso está acontecendo porque você está fazendo a submissão do seu formulário no seu botão (que não possui tipo submit) por meio do evento onclick.

Como remediar isso:

  1. Mude a submissão do seu formulário do onclick do botão para um novo atributo chamado onsubmit no elemento form;
  2. Adicione type="submit" no botão de submissão do formulário.
0

Você pode usar JQuery para fazer este processo de habilitar ou desabilitar o botão, basta colocar o evento onblur nos campos chamando uma função javascript como por exemplo abaixo:

<input id="campo1" onblur="valida()" />
<input id="campo2" onblur="valida()" />
<input type="submit" id="botao" value="Botão Teste">

<script>
function valida(){
   if($('#campo1').val() != '' && $('#campo2').val() != ''){
      $('#botao').prop("disabled", false);
   } else {
      $('#botao').prop("disabled", true);
   }
}
</script>

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .