Form - check if either field is complete

Wappler General How To
#1

I have a form with two text fields and a submit button.

I only want the user to complete either or both fields. So at least one field has to be completed.

I tried the validation rules but no luck.

Any assistance would be appreciated.

#2

You can dynamically assign the required attribute for both inputs, based on other field’s value.

<input type="text" id="input1" name="input1" dmx-bind:required="!input2.value">
<input type="text" id="input2" name="input2" dmx-bind:required="!input1.value">
#3

Thanks @Teodor. Is it the id or the name of the input field that I enter in?

dmx-bind:required="!input2.value"

#4

It’s the name.

#5

They are both coming up as required fields.

<input id="inp_email_address" name="shr_media_email_address" type="text" class="form-control mb-2 form-control-sm" placeholder="Enter email address" dmx-bind:required="!shr_media_mobile_number.value">

<input id="inp_mobile_number" name="shr_media_mobile_number" type="tel" class="form-control form-control-sm mb-2" placeholder="Enter mobile number" dmx-bind:required="!shr_media_email_address.value">
#6

Actually is not doing the check and letting the form go through.
I’ve tried this as well and it didn’t work

<input id="inp_email_address" name="shr_media_email_address" type="text" class="form-control mb-2 form-control-sm" placeholder="Enter email address" dmx-bind:required="inp_mobile_number.value.trim().length()==0">

<input id="inp_mobile_number" name="shr_media_mobile_number" type="tel" class="form-control form-control-sm mb-2" placeholder="Enter mobile number" dmx-bind:required="inp_email_address.value.trim().length()==0">
#7

Sorry but what is not working exactly?
I just tested this and it works perfectly fine.

#8

It’s saying both fields are required when I try to submit.

<input id="inp_email_address" name="shr_media_email_address" type="text" class="form-control mb-2 form-control-sm" placeholder="Enter email address" dmx-bind:required="!shr_media_mobile_number.value">

<p class="text-primary text-center small mb-2">and/or</p>

<input id="inp_mobile_number" name="shr_media_mobile_number" type="tel" class="form-control form-control-sm mb-2" placeholder="Enter mobile number" dmx-bind:required="!shr_media_email_address.value">
#9

So isn’t that the logic when both are empty?

#10

The logic is at least one field is required. So the user can enter and email address, and/or a mobile number.
In other words, they can’t be both empty.

#11

So isn’t that what it currently does, according to your explanation:

#12

Yes, it’d saying both are required, and wants me to enter both. I can’t just enter one field.

#13

That’s because you need to use the input ID in the expression :slight_smile: My bad sorry i mislead you.

#14

Excellent! It worked!

#15

Is there a way to display the error message to say either fields are required?

#16

Add:

data-msg-required="TEXT GOES HERE"

to both inputs.

1 Like
#17

Yes! But it appears twice!