Laravel registration not working because of hidden fields

Question

I am new to laravel and I have a problem in my registration form.

I have a select dropdown refer here with two options -Faculty and -Student. When the user will chose student the fields grade and section will show while if faculty it will hide the two fields.

But my problem is when I chose the faculty it will not register. Because of the two hidden fields.

Here is my registration.blade.php

<form class="px-3" method="POST" action="{{ route('register') }}">
@csrf

 <div class="form-row">
<div class="form-group col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus placeholder="Name">                                          @error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

<div class="form-group col-md-6">
<input id="mobile" type="mobile" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile') }}" required autocomplete="mobile" placeholder="Phone Number">                                 @error('mobile')                                           <span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<div class="form-group">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="Email">                                        @error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

<div class="form-group">
<input id="password" type="password" class=" form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" data-toggle="password" placeholder="Password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

<div class="form-group">
<input id="password-confirm" type="password" class="form-control @error('confirmed') is-invalid @enderror" name="password_confirmation" required autocomplete="current-password" placeholder="Confirm Password" data-toggle="password"  >
</div>

<div class="form-group">
<select class="form-control @error('category')
is-invalid @enderror" name="category" id="category" required>
<option selected disabled>Register As:</option>
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
@error('category')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
 @enderror
</div>

<div class="form-row hidden form-input" id="pDetails">
<div class="form-group col-md-6">
 <select class="form-control @error('uyear') is-invalid @enderror" name="uyear" id="uyear">
<option selected disabled>Year</option>
<option value="First year">First Year</option>
<option value="Second Year">Second Year</option>
<option value="Third Year">Third Year</option>
<option value="Fourth Year">Fourth Year</option>
</select>
@error('uyear')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>

<div class="form-group col-md-6">
<input id="usec" type="text" class=" input form-control @error('usec')is-invalid @enderror" name="usec" placeholder="Section" >
@error('usec')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>

<button class="btn btn-primary btn-user btn-block">Register
</button>
<hr>
</form>

Registration Controller

protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
            'mobile' => ['required' ,'string' ,'unique:users'],
            'category' => ['required' ,'string'],
            'uyear' => ['required','nullable','string'],
            'usec' => ['required', 'nullable', 'string'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\Models\User
     */


    protected function create(array $data)
    {
        $user = config('roles.models.defaultUser')::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
        'category' => $data['category'],
        'mobile' => $data['mobile'],
        'uyear' => $data['uyear'],
        'usec' => $data['usec'],
        ]);

        $role = config('roles.models.role')::where('name', '=', 'User')->first();  //choose the default role upon user creation.
        $user->attachRole($role);

        return $user;

    }

    public f

This is the javascript that hide/show the hidden fields

  <script type="text/javascript">
    $('#category').change(function(){
        var responseID = $(this).val();
        if(responseID =="student"){
            $('#pDetails').removeClass("hidden");
            $('#pDetails').addClass("show");
            $( "#uyear" ).prop( "disabled", false );
            $( "#usec" ).prop( "disabled", false );
        } else{
            $('#pDetails').removeClass("show");
            $('#pDetails').addClass("hidden");
            $( "#uyear" ).prop( "disabled", true );
            $( "#usec" ).prop( "disabled", true );
        }
        console.log(responseID);
    });
</script>

Answer 1

I tested your code, there is problem about validation fails because you declared required in "uyear & usec" field rule. You need to use requiredIf Rule. If condition true then it will check Required otherwise it will ignore required rule

just remove required from uyear & usec field rule. & see below & replace it in your rules instead of required rule.

Rule::requiredIf(function () use ($request) {
     return $request->category === "student";
})

Note:- you need to include use Illuminate\Validation\Rule; class

here if full code of your validation rule. Please check it

public function test(Request $request)
{
    Validator::make($request->all(), [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8', 'confirmed'],
        'mobile' => ['required' ,'string', 'unique:users'],
        'category' => ['required' ,'string'],
        'uyear' => [
            Rule::requiredIf(function () use ($request) {
                    return $request->category === "student";
            }),'nullable','string'],
        'usec' => [
            Rule::requiredIf(function () use ($request) {
                return $request->category === "student";
            }), 'nullable', 'string'],
    ])->validate();
}

for More Details abour RequiredIf check here Official Docs

Edited:-

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;

class RegisterController extends Controller
{
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function create(Request $request)
    {
        Validator::make($request->all(), [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
            'mobile' => ['required' ,'string'],
            'category' => ['required' ,'string'],
            'uyear' => [
                Rule::requiredIf(function () use ($request) {
                        return $request->category === "student";
                }),'nullable','string'],
            'usec' => [
                Rule::requiredIf(function () use ($request) {
                    return $request->category === "student";
                }), 'nullable', 'string'],
        ])->validate();

        print_r($request->all());
    }
}