Home / Questions / 28523
Accepted
Cidius
Asked: 2020-10-19 08:11:02 +0800 CST 2020-10-19 08:11:02 +0800 CST

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

  • 772

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

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

My question is that if somehow, with js or something, that when I press the button to modify the password, the required of 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 took out the required ones from the password fields, since I activate or not activate the button, it asks for them 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'
    ];
}
laravel-5

2 Answers

  1. Best Answer

    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 rely on JavaScript, in this case I'll give you a quick example with jQuery that can 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 rule required_ifto relate the key fields with 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 depending on the method you apply, remember that in the rules() method you can play with the request information as long as you return an array.

    • 0

  2. This way worked for me but not quite right. Using 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 one for the disable() function.

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

    • 0