Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

denewey's avatar

How To Toggle Open Using jQuery Form Validator

I have a Laravel 8 application that uses jQuery Form Validator. My form has an email input which uses "data-validation-url" that sends the validation to a Controller that checks to see if the email is in the database. If it's in the database and set as "Deleted" I want to give the user the choice to re-activate the email address.

Everything works up to the point of toggling the div that shows a checkbox (with css it is a slider button) where the user can select whether or not to re-activate the email.

The applicable view code is like so:

<div class="row no-margin-xs m-b-15">
      <label class="col-sm-4 col-md-3 control-label p-xs-l-0">{{ trans("app/administration/users.new.form.email.label") }}</label>
              <div class="col-sm-6 col-md-4 no-padding-xs"
                             data-dynamic-visible="true"
                             data-dynamic-visible-reversed="true"
              >
                    <input type="text" class="form-control" name="email" maxlength="256"
                                   value="{{ old('email') }}"
                                   data-validation="required email server"
                                   data-validation-error-msg-required="{{ trans("app/administration/users.new.form.email.required") }}"
                                   data-validation-error-msg-email="{{ trans("app/administration/users.new.form.email.email") }}"
                                   data-validation-url="{{ route("app.administration.users.validate.post") }}"
                                   data-validation-req-params="{{ json_encode(['_token' => csrf_token()]) }}"
                                   data-dynamic-visible-target="#email-auto"
                            >
                        </div>
                    </div><!-- /.row -->

                    <div id="email-auto">
                        <div class="row no-margin-xs m-b-15">
                            <label class="col-sm-4 col-md-3 control-label p-xs-l-0" style="color:red;">{{ trans("app/administration/users.new.form.email.deleted") }}</label>
                            <div class="col-sm-6 col-md-4 no-padding-xs">
                                <label class="switch">
                                    <input type='hidden' name="email_auto" value="0">
                                    <input type="checkbox" name="email_auto" id="email_auto" value="0" 
                                    >
                                </label>

                            </div>
                        </div><!-- /.row -->
                    </div>

I inherited this site so there are a couple things I don't understand. For example:

 data-dynamic-visible="true"
 data-dynamic-visible-reversed="true"

and

data-dynamic-visible-target="#email-auto"

I don't know what package the "data-dynamic" settings are from, but it seems the right setting should initiate a toggle of the second div when the validation returns an error in the first div. When "data-dynamic-visible" and "data-dynamic-visible-reversed" are set, regardless if set true or false, the second div () doesn't show. If only "data-dynamic-visible-reversed" exists, regardless of setting, the second div does show.

The validation code in the Controller returns an array with "valid" = "false".

Can anyone tell me what package the "data-dynamic" settings come from? Or short of that have a clue as to how to trigger a toggle of the #email-auto div?

0 likes
0 replies

Please or to participate in this conversation.