Home > OS >  How to handle validation of multiple hidden fields
How to handle validation of multiple hidden fields

Time:08-25

I have created a form where in many cases some fields are not displayed until user select a certain option that will make the particular field displayed, this is controlled by HTML onchange Event Attribute with functions in script. To this point everything works fine.

Problem:

In the Request class I am implementing some rules for validation , for all displayed fields and for particular none displayed fields if only their options are selected then they should be validated. In my case I have 8 of this none displayed fields are a_text, b_text, c_text, d_text, e_text, f_text,g_text, h_text. If this fields were 2 it would be easy to write an If statement to choose which should be validated and which should not be validated like below:

<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Http\Request;
class StoreSectionERequest extends FormRequest

public function rules(Request $request)
{
    $a = $request->a;
    $b = $request->b;
    if($a==5 && $b==3){
        return [
            //for none displayed fields only validate the below
            'a_text' =>'required',
            'b_text' =>'required',
            //..and other displayed fields will be valuated.
        ];
    }elseif(!$a==5 && $b==3){
        return [
             //for none displayed fields only validate the below
            'b_text' =>'required',
            //..and other displayed fields will be valuated.
        ];     
    }elseif($a==5 && !$b==3){
        return [
             //for none displayed fields only validate the below
            'a_text' =>'required',
            //..and other displayed fields will be valuated.
        ];     
    }
     // in case all none displayed field are not selected only check other fields below
    return [
            // validaying all none displyed field here]; }}

In my case I have 8 fields which are none displayed, of which I have to handle all cases of fields if it's selected and not, this will lead to 100's or a lot of if...elseif..statements. What is the wright approach to handle this kind of task.

Form

 <form method="POST" action="{{ route('......') }}">@csrf
        <div >
          <div  id="lackingSkills">
            <label for="">Which skills and competencies graduates are lacking? </label>
            <select name="a" multiple="multiple" id="skills"  onchange="myFunction()">
              <option value="1" @if (old('a')=="1" ) {{ 'selected' }} @endif>Information and communication skills</option>
              <option value="2" @if (old('a')=="2" ) {{ 'selected' }} @endif>Interpersonal skill</option>
              <option value="3" @if (old('a')=="3" ) {{ 'selected' }} @endif>System management skills</option>
              <option value="4" @if (old('a')=="4" ) {{ 'selected' }} @endif>Innovation skills</option>
              <option value="5" @if (old('a')=="5" ) {{ 'selected' }} @endif>Others. Specify</option>
            </select>
            <small >If necessary, choose more than one option.</small>
            @error('a') <span  role="alert">{{ $message }}</span> @enderror
          </div>
          <div  id="skillReason" {!! $errors->has('a_text') || old('a') == 5 ? '':' style="display: none"' !!} >
            <div >
              <textarea rows="2"  name="e2_10" id="skillReason" placeholder="Type here.."></textarea>  
            </div>
          </div>

          <div >
            <select name="b" id="b"  onchange="myFunction2()">
              <option value="" selected disabled>Select</option>
              <option value="1" @if (old('b')=="1" ) {{ 'selected' }} @endif>Most of them match the requirements</option>
              <option value="2" @if (old('b')=="2" ) {{ 'selected' }} @endif>Only some match the requirements</option>
              <option value="3" @if (old('b')=="3" ) {{ 'selected' }} @endif>Other, specify</option>
            </select>
            @error('b') <span  role="alert">{{ $message }}</span> @enderror
          </div>
          <div  {!! $errors->has('e3_5') || old('b') == 3 ? '':' style="display: none"' !!} >
            <div >
              <textarea rows="2"  id="b_text" name="b_text" placeholder="Type here.."></textarea>
              <label for="floatingInput" id="specify">Specify here..</label>
            </div>
          </div>

          <div >
            <select name="c" id="graduatesPreference"  onchange="myFunction3()">
              <option value="" selected disabled>Select</option>
              <option value="1" @if (old('c')=="1" ) {{ 'selected' }} @endif>Yes</option>
              <option value="2" @if (old('c')=="2" ) {{ 'selected' }} @endif>No</option>
            </select>
            @error('c') <span  role="alert">{{ $message }}</span> @enderror
          </div>
          <div  id="preferenceReason" {!! $errors->has('c_text') || old('c') == 1 ? '':' style="display: none"' !!}>
            <label for="">Provide the reason, why you have a preference for a specific university?</label>
            <textarea name="c_text" id="" rows="3"  placeholder="Provide the reason here ..."></textarea>
          </div>
      
          <div >
            <select name="d" id="qualification"  onchange="myFunction4()">
              <option value="" selected disabled>Select</option>
              <option value="1" @if (old('d')=="1" ) {{ 'selected' }} @endif>Bachelor’s degree</option>
              <option value="2" @if (old('d')=="2" ) {{ 'selected' }} @endif>Post-graduate</option>
              <option value="3" @if (old('d')=="3" ) {{ 'selected' }} @endif>Other, specify</option>
            </select>
            @error('d') <span  role="alert">{{ $message }}</span> @enderror
          </div>
          <div  id="d_text" {!! $errors->has('d_text') || old('d') == 3 ? '':' style="display: none"' !!}>
            <label for="">Explain why?</label>
            <textarea name="d_text" id="d_text" rows="3"  placeholder="Provide the reason here ..."></textarea>
          </div>

           ////.............others fields like e,f,g,h, all have the same functionality like the above ones.
         
          <div >
            <button type="submit" >Save</button>
          </div>
        </div>
      </form>
   
<script>
/// various function for onchange
myFunction()
myFunction2()
myFunction3()
myFunction4()
</script>

My question: what is the wright approach to handle the above scenario without writing 100's of if..elseif statements. Thanks in advance.

CodePudding user response:

In form validation u have rules like required with or without, u can see more here

Little bit lower on the docs u can see Conditionally Adding Rules

So basically u will be doing same validation but without too much mess in your code.

  • Related