How to make certain fields only required only if I activate a button

1

I am creating the form of the user profile and I am confronted with the problem of how to edit the password. the first thing that occurred to me is something simple, create a collapsed button, that displays the typical entry of the current pass and the new pass (with confirmation)

In principle add the required both by php and in rules. But maybe I should generate the verification from the controller and send flash messages

My question is that if in some way, with js or something, that when you press the button to modify the password, the required php is activated.

{!! Form::open(['route'=>'miperfil.store','method'=>'POST']) !!}

    <div class="form-group">        
        {!! Form::label('name','Nombre:') !!}
        {!! Form::text('name',Auth::user()->name,['class'=>'form-control','placeholder'=>'Nombre Completo','required']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('email','Correo Electronico:') !!}
        {!! Form::text('email',Auth::user()->email,['class'=>'form-control','placeholder'=>'[email protected]','required']) !!}
    </div>

    <button aria-controls="collapseExample" aria-expanded="false" class="btn btn-warning" style="margin-top: 5px;" data-target="#collapseExample" data-toggle="collapse" type="button">
    Cambiar Password
    </button>

    <div class="collapse" id="collapseExample">
        <br>
        <div class="form-group">
            {!! Form::label('pass','Contraseña Actual:') !!}
            {!! Form::password('pass',['class'=>'form-control','placeholder'=>'*****************']) !!}
        </div>  

        <div class="form-group">
            {!! Form::label('password','Contraseña Nueva:') !!}
            {!! Form::password('password',['class'=>'form-control','placeholder'=>'*****************']) !!}
        </div>

        <div class="form-group">
            {!! Form::label('password_confirmation','Repetir Contraseña:') !!}
            {!! Form::password('password_confirmation',['class'=>'form-control','placeholder'=>'*****************']) !!}
        </div>
    </div>

    <div class="form-group">
        <br>
        {!! Form::submit('Registrar Cambios',['class'=>'btn btn-primary']) !!}

    </div>

{!! Form::close() !!}

I take out the required to the password fields, since activate or not activate the button, it asks me the same.

Here the rules

public function rules()
{
    return [
        'name' => 'required|string|min:3|max:60',
        'email' => 'required|email|unique:users',
        'pass' => 'required',
        'password' => 'required|min:3|max:60|confirmed'
    ];
}
    
asked by Cidius 18.10.2016 в 18:11
source

2 answers

0

There are several ways to do it, one that I usually use is to add an extra field, it can be a checkbox or a hidden field.

For the frontend part you need to support yourself in JavaScript, in this case I give you a quick example with jQuery that could possibly be improved:

{!! Form::hidden('enable_pass', 0, ['id' => 'enable_pass']) !!}

$("button").click(function(){

  var enablePass = $("#enable_pass");
  var passFields = $("[type=password]");

  if (enablePass.val() == 0) {
    enablePass.val(1);
    passFields.attr('required', 'required');
  } else {
    enablePass.val(0);
    passFields.removeAttr('required');
  }
});

Already in the validation part of the Laravel Request you would use the required_if rule to relate the key fields to our hidden field and its value:

public function rules()
{
    return [
        'name'     => 'required|string|min:3|max:60',
        'email'    => 'required|email|unique:users',
        'pass'     => 'required_if:enable_pass,1',
        'password' => 'required_if:enable_pass,1|min:3|max:60|confirmed'
    ];
}

If you need another more complex validation according to the method you apply, remember that in the rules () method you can play with the request information as long as you return an array.

    
answered by 18.10.2016 / 19:01
source
0

This way I walked but not quite right. Resorting to a smaller example of the first ..

<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-warning boton" style="margin-top: 5px;" data-target="#collapseExample" data-toggle="collapse" type="button" onclick="habilita()">
    Cambiar Password
    </button>

    <div class="collapse" id="collapseExample">
        <br>
        <div class="form-group">
            {!! Form::label('pass','Contraseña Actual:') !!}
            {!! Form::password('pass',['class'=>'form-control inputText','placeholder'=>'*****************','disabled','required']) !!}
        </div>
    </div>

@section('js')
<script>

function habilita(){

    $(".inputText").removeAttr("disabled");

}

function deshabilita(){

    $(".inputText").attr("disabled","disabled");

}
</script>
@endsection

This is the other solution I found but the issue is that I would need 2 buttons, another for the function disable ().

Or if you can, put a kind of flag so that the next click takes disable (), but escapes my knowledge

    
answered by 19.10.2016 в 03:11