java script for conditional required fields

required fields

[hozyali]

Hello,

I need some help with javascript as I am not really good with javascripts.

Here is my scenario
I have 2 drop downs with Yes/No
I have 2 text fields.

Both text fields need to be required only when the above drop downs have specific Yes/No values.

Like if drop down 1 = yes, either text field must be filled. I mean user should at least fill one of the text fields if he has selected YES from the drop down above.

same condition with the other drop down when NO is selected.

Please help.

thanks

[subexpression]

hozyali,

"required" means the user has to identify the text inputs which are necessary.
Sometimes an asterisk "*" is used, or even the word "required" next to the field to identify it as required.

But ultimately, there's no way to ensure the user "must" do anything. The user first has to identify something on the interface which indicates an action is required. That's why I suggest using a label or asterisk.

Once a specific option is selcted, you can toggle the asterisks or "required" text labels.
You could try this:

<style type="text/css">
.required {
visibility:hidden;
color:#f00;
}
</style>
<script type="text/javascript">
function required(val){
 var spans = document.getElementsByTagName('span');
 for(var i = 0; i < spans.length; i++){
 if(spans[i].className == 'required'){
  spans[i].style.visibility = (val == 'required') ? 'visible' : 'hidden';
 }
 }
}
</script>
<select onchange="required(this.options[this.selectedIndex].value);">
<option value="required">Yes</option>
<option value="not">No</option>
</select>

<span class="required">*</span> <input type="text" />
<br />
<span class="required">*</span> <input type="text" />

[hozyali]

thanks a lot for your help. But it is not working for me actually.

I understand that we should show some sort of asterisk thing, but we also have to force the user to enter something in the required fields instead of just submitting the form with empty fields.

[subexpression]

hozyali,

Are you referring to some sort of input validation?
So, if the user doesn't type something in the text input, they are trapped and cannot proceed any further?

<script type="text/javascript">
function formsubmit(){
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
if(input1.value == '' || input2.value == ''){
return false;
}
document.validtext.submit();
}
</script>

<form name="validtext" action="javascript:formsubmit();" method="post">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input type="submit" name="submit" value="submit" />
</form>

When the user clicks the submit button, and fields are empty, nothing happens.
Once the user enters text in both fields, clicks submit, then the form is submitted.

[hozyali]

yes you are right. i need the form not to submit until the user fills at least one of the required fields.

[subexpression]

hozyali,

The condition:
(input1.value == '' || input2.value == '')

...would prevent the form submission if one or both fields are empty.
The only way it would submit with the logical OR || is if BOTH fields have at least 1 character.

The logical OR operator returns the boolean value true if either or both operands is true. It returns false otherwise.

So, if it is true that input1.value == '', then the block is executed.
If it is true that input2.value == '', then the block is executed.
If it is true that both input1.value == '' and input2.value == '', then the block is executed.

Otherwise, the form submits!

[hozyali]

thanks. I think this image will help you understand what exactly I want. Kindly review.
[mr6string.com ]

[hozyali]

can anyone please help in this case?

[subexpression]

Ah, now you're asking about enabling/disabling fields too.

First, before we consider two dropdowns setting conditions for enabling or disabling fields, let alone the requiring of user input, we need to examine the permutations for all possible conditions. From your image, I gathered you have two <select> dropdowns:
Are you willing to ship?
Are you willing to meet in person?
...and two <input> fields:
Paypal Email address
Google Merchant ID

Your image gives enough interaction data to assume this case is true...it shows both <select> elements show "Yes", email input is disabled, and the google ID input is enabled:
ship: yes
meet: yes
email: disabled
google: required / enabled

ship: yes
meet: no
email: required / enabled
google: required / enabled

But, what about these cases?
ship: no
meet: yes
email: ?
google: ?

ship: no
meet: no
email: ?
google: ?

Communicate in clear terms what the interaction is up front, and then the development is a cinch.

[hozyali]

hey, thanks for trying to help.

You are somewhat correct. And yes, I need fields enabled upon certain conditions.

Here is the example

If (ship=yes && meet=No) {
Paypal and Gcheckout must be enabled. And only one of them is required.
}

If (ship=yes && meet=Yes) {
Paypal and Gcheckout must be enabled. And only one of them is required.
}

making only one of them required is because user may enter either Paypal email or Google Checkout ID.

before submitting the form, it should check if the above condition is true and both fields are empty. so it will give an error.

hope it helps.