1 votes

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

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

In principle add the required both by php as in rules. But maybe it 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, activate the required php.

{!! 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'=>'ejemplo@gmail.com','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() !!}

Remove the required fields password, since active or not active button I ask for the same.

Here are 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'
    ];
}

0voto

Shaz Points 22941

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

For the frontend you need to rely on JavaScript, in this case I give you a quick example with jQuery you may be able to improve:

{!! 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 part of validation of the Request of Laravel would use the rule required_if to match 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 validation to the more complex according to the method of applique, remember that in the method rules (), you can play with the information in the request as long as you return an array.

0voto

Cidius Points 351

This way walked 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 needed 2 buttons, another for the function disables ().

Or if you can, put a kind of flag for the next click to take disable (), but escape my knowledge

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X