How to change CSS value with a returned validation error

Question

I have a scenario I will try to explain, sorry for my English.

I have created a form to submit some values , within the form user can select an option, but one option of which it is "Others specify..." when it is selected the hidden textarea is displayed and user can fill in some data. For the case that it is selected and user does not fill any data, the form is returned back due to validation failure but the textarea is no longer visible because onchange="selectOption();" is not triggered. Everything works fine but in my case I am trying to make the textarea visible with validation error message when it is returned back. How do I perfom this.

 <form method="POST" action="{{route('employer-section-b.store')}}"> @csrf <div class="col-md-12">
<select name="b3" id="sector" class="form-control @error('b3') is-invalid @enderror" onchange="selectOption();">
          <option value="" disabled selected>select</option>
          <option value="1" @if (old('b3')=="1" ) {{ 'selected' }} @endif>Agriculture, forestry, and fishing </option>
          <option value="2" @if (old('b3')=="2" ) {{ 'selected' }} @endif>Mining and quarrying</option>
          <option value="14" @if (old('b3')=="3" ) {{ 'selected' }} @endif>Others specify……</option></select>
       
      <div class="col-md-12 mt-2" id="specify" style="display: none">
        <div class="form-floating mb-3">
          <textarea rows="2" name="b3" class="form-control @error('b3') is-invalid @enderror" placeholder="Type here..">
            {{ old('b3') }}</textarea>
        </div></div>
      </div>
    </form>

Script to diplay textarea if others is selected

<script>
  function selectOption() {
    var sector = document.getElementById("sector").value;
    var y = document.querySelector("#specify");
    if (sector == 3) {
      y.removeAttribute("style")
    } else if (sector != 3) {
      y.setAttribute("style", "display:none");
    }
  }
</script>

setAttribtue is the completely wrong way to add a style. Just use element.style.display = 'none';. However, smart and modern developers will add/remove/toggle CSS classes with classList. By taking the right approach your whole issues and the connected questions would resolve or change. — tacoshy
– tacoshy, Commented Aug 20, 2022 at 11:53
Thanks @tacoshy for the quick answer, if possible can I get a snippet for the approach you suggest. Appreciation in advance — Gabriel Rogath
– Gabriel Rogath, Commented Aug 20, 2022 at 11:59
Currently sitting in a bus. I just noticed that you also miss a closing </select>-tag. The approach is simple: if (sector == 3) { y.classList.remove('d-none); } else { y.classList.add('d-none); } Then simply disable the submit button if the textarea is empty or not. — tacoshy
– tacoshy, Commented Aug 20, 2022 at 12:07
Thanks for your well explanations, that is working fine, but for my scenario as explained above I want also to show the textarea when validation error is returned. Because when error is retuned I can only see Other Specify as selected but the textarea is invisible . How do I make the textarea also visible when validation error is returned. Thanks again. — Gabriel Rogath
– Gabriel Rogath, Commented Aug 20, 2022 at 12:26

ThS · Accepted Answer · 2022-08-21 19:14:03Z

Why not explicitly showing the textarea when the b3 option with value 3 is selected ? This way, changing the JS code is no longer needed.

Se the example below:

You have a duplicate name in use, b3, so i have changed the second duplicate found on the textarea to b4.

<form method="POST" action="{{ route('employer-section-b.store') }}"> 
  @csrf
  <div class="col-md-12">
    <select name="b3" id="sector" class="form-control{{ $errors->has('b3') ? ' is-invalid':'' }}" onchange="selectOption()">
      <option value="" disabled selected>select</option>
      <option value="1"{{ old('b3') == 1 ? ' selected':'' }}>Agriculture, forestry, and fishing </option>
      <option value="2"{{ old('b3') == 2 ? ' selected':'' }}>Mining and quarrying</option>
      <option value="3"{{ old('b3') == 3 ? ' selected':'' }}>Others specify……</option>
    </select>
    <div class="col-md-12 mt-2" id="specify"{!! ($hasB4Error = $errors->has('b4') || old('b3') == 3) ? '':' style="display: none"' !!}>
      <div class="form-floating mb-3">
        <textarea rows="2" name="b4" class="form-control{{ $hasB4Error ? ' is-invalid':'' }}" placeholder="Type here..">{{ old('b3') }}</textarea>
      </div>
    </div>
  </div>
</form>

{!! $errors->has('b4') || old('b3') == 3 ? '':' style="display: none"' !!}

This line of code does the trick, it tells Blade to only place the CSS that hides the textarea only when no errors found on b3 nor b4 elements.

Water Man · Accepted Answer · 2022-08-21 18:25:14Z

1

What happens is when you submit the form, the page is reloaded and all the form data is reset.

What you should do is create a submit event listener in javascript, and run event.preventDefault() to stop the form from reloading the page, and then handle what would happen if the form was submitted when the text area is empty.

document.querySelector('form').addEventListener('submit', (event) => {
    // Prevent form from reloading the page
    event.preventDefault();

    // Get content written inside textarea
    let textareaValue = document.querySelector('.form-floating > .form-control').value;

    // Check if textarea is empty
    if (!textareaValue.trim()) {
        // Show a message to the user that an error has occured
        console.log('Validation error');
    } else {
        // Route to "employer-section-b.store"
        route('employer-section-b.store');
    }
});

answered Aug 21, 2022 at 18:25

Water Man

3232 silver badges9 bronze badges

3 Comments

miken32 Over a year ago

Why would you use .form-floating > .form-control – which is wrong – when the element you want has a name attribute?

Water Man Over a year ago

I'm just showing him an example of what he would want to do, he can change it to whatever he wants later

Gabriel Rogath Over a year ago

Thanks @WaterMan for this approach, with this snippet I need to add an if statement first to check if (sector == 3) before starting !textareaValue.trim() to avoid checking textarea even though sector == 1 || sector == 2 is selected.

Collectives™ on Stack Overflow

How to change CSS value with a returned validation error

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related