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?
Please or to participate in this conversation.