asked on

Validation Text boxes with Radio button options

This question is in reference with
https://www.experts-exchange.com/questions/26856442/Validating-the-text-boxes-with-radio-buttons.html

Basically I have three radio buttons and three text boxes associated with them and user can select only one option at a time for the search. With help from AGX (an expert who answered my previuos question), was able to get it done. (please see the code)

1) Now, I need to validate one of the text boxes to see whether it is a right item number or not and the length of the item is correct or not. (Other than the blank value)
2) I have a function which checks for a valid item number,length etc and how can I use that with these text boxes like
if (!isValidItemNumber(iTemNumber.value))
            {
                  alert("You must enter a valid Item Number.");
                  iTemNumber.focus();
                  return;
            }
3) Basically I need to validate only one text box other than balnk values by using the funcion I have and other two text boxes for only blank values.

Thanks in advance

<script language="JavaScript">
function selButton() {
		var buttons = document.getElementsByName("option");
		for (var i = 0; i < buttons.length; i++) {
			var textElem      = document.getElementById("Text"+ buttons[i].value);
			textElem.disabled = (buttons[i].checked ? false : true);
			textElem.value    = (buttons[i].checked ? textElem.value : "");
		}
	}	
	

function checkButtons()
	{
		var buttons = document.getElementsByName("option");
		var foundSelectedButton = false;
		var foundSearchText = true;
		for (var i = 0; i < buttons.length; i++) {
			var textElem  = document.getElementById("Text"+ buttons[i].value);
			var textValue = textElem.value.replace(/\s+/g, "");
				if (buttons[i].checked) {
				   foundSelectedButton = true;
			   if (textValue.length == 0) {
					  foundSearchText = false;
				  break;
			   }
			}	
	  }	

  if (!foundSelectedButton) {
  var		error = 1
      alert("Please select one of the options");
	  return;
  }
  else if (!foundSearchText) {
  	var		error = 1
       alert("Please enter a value for the search");
	    return;
  }

   return foundSelectedButton && foundSearchText; 
		
		if(error == 1) 
		{
			alert(displaymsg);
			return ;
		} 
		if (error != 1)
		{
		submitfuseAction('myFuseaction');		
		}
	}

</script>
<table align="center" >
<form name="name1" onSubmit="return checkButtons()">
<tr>
		<td width="10"><input type="radio" name="option" value="1" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 1
			</font>
		</td>
		<td>
			<input type="text" id="Text1" name="iTemNumber" size="23" disabled>
		</td>
		<td>&nbsp;
			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="option" value="2" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 2
			</font>
		</td>
		<td>
			<input type="text" id="Text2" name="Text2" size="23" disabled>
		</td>
		<td>&nbsp;			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="option" value="3" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 		Search Option 3
			</font>
		</td>
		<td>
			<input type="text" id="Text3" name="Text3" size="23" disabled>
		</td>
				<td>&nbsp;			
		</td>
	</tr>

<tr>
		<td colspan="3" align="center"><br><input type="submit" name="search" alt="search" value="Search"></td>
	</tr>
</table>
</form>

Open in new window

Gewgala

if you indeed have a function named isValidItemNumber that returns a bool value, then the below should work just fine:

if (!isValidItemNumber(iTemNumber.value))
{
alert("You must enter a valid Item Number.");
iTemNumber.focus();
return;
}

does your function declaration look like the following?

function isValidItemNumber(str)
{
var valid = false;

if (str.length > 5)
{
if (str == "valid value here" || str == "valid value here" || str == "valid value here")
valid = true;
}

return valid;
}

Gewgala

Forgot to mention of course that the str.length > 5 is just an example, the 5 would of course need to be changed to accomodate your needs, but the example function I provided would work fine, and then yes you can call it the way you mentioned in your question, with a ! in front of it to check to see if the return value is false.

Tpaul_10

ASKER

Thanks for the quick reply Gewgala.
As per your suggestion, I was able to get it worked by calling the funticon the way I have mentioned in my question.

But the problem is, if I select other radio button, I am still getting the item number alert.

Basically I need to get that alert message or validate itemnumber text box only when itemNumber text box is active or the related radio button is selected since the text box will be activeated by selecting the option.

Thanks in advance.

ASKER CERTIFIED SOLUTION

Gewgala

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tpaul_10

ASKER

THANKS again. It worked and I have tried to do the similar thing for another text box and doesn't work.
Here is what I have tried

/*if (getSpecialRadioButton().checked && (document.myForm.itemName.value==''))

            {
                  alert("You must enter an Item Name.");
                  document.myForm.itemName.focus();
                  return;
            }
*/

But the alert is going to the else if part of the following code as i am trying to give a custom message instead of common alert for the other text boxes. Please correct me what I am doing wrong.

if (!foundSelectedButton) {
var            error = 1
alert("Please select one of the options");
       return;
}
else if (!foundSearchText) {
      var            error = 1
alert("Please enter a value for the search");
       return;
}

Thanks for your help.

Gewgala

well, in the code you posted, I noticed that you are missing a ; at the end of error = 1 in both the if block and else if block. This could just have been a bad copy, but can you make sure that the semi-colon ; is present following those lines?

example:

var error = 1;

Gewgala

Also, where are you setting the value to the variable foundSelectedButton? If the code execution is going to the else if block, that means that the if block is not validating to true. You have the variable foundSelectedButton preceded by an exclamation mark, !, which means that the block will only execute when foundSelectedButton has a value of false. If it fails to enter the if block it means foundSelectedButton is true. Can you show the code where you are declaring/setting that variable?

Tpaul_10

ASKER

I have corrected the ; issue and still the same.
please see the code below for foundSelectedButton and foundSearchText values.

Thanks

function validateForm()
	{
		var buttons = document.getElementsByName("option");
		var foundSelectedButton = false;
		var foundSearchText = true;
		for (var i = 0; i < buttons.length; i++) {
			var textElem  = document.getElementById("Text"+ buttons[i].value);
			var textValue = textElem.value.replace(/\s+/g, "");
				if (buttons[i].checked) {
				   foundSelectedButton = true;
			   if (textValue.length == 0) {
					  foundSearchText = false;
				  break;
			   }
			}	
	  }

Open in new window

Gewgala

Are you trying to access the "foundSelectedButton" outside of this function that sets its value?

Does the following code reside in a different function than the one above?:

if (!foundSelectedButton) {
var error = 1;
alert("Please select one of the options");
return;
}
else if (!foundSearchText) {
var error = 1;
alert("Please enter a value for the search");
return;
}

Tpaul_10

ASKER

The above code outside the function that sets its value. Please see the code section to see how I have it.

Thanks for all your help

<script language="JavaScript">
function selButton() {
		var buttons = document.getElementsByName("option");
		for (var i = 0; i < buttons.length; i++) {
			var textElem      = document.getElementById("Text"+ buttons[i].value);
			textElem.disabled = (buttons[i].checked ? false : true);
			textElem.value    = (buttons[i].checked ? textElem.value : "");
		}
	}	
	

function checkButtons()
	{
		var buttons = document.getElementsByName("option");
		var foundSelectedButton = false;
		var foundSearchText = true;
		for (var i = 0; i < buttons.length; i++) {
			var textElem  = document.getElementById("Text"+ buttons[i].value);
			var textValue = textElem.value.replace(/\s+/g, "");
				if (buttons[i].checked) {
				   foundSelectedButton = true;
			   if (textValue.length == 0) {
					  foundSearchText = false;
				  break;
			   }
			}	
	  }	

  if (!foundSelectedButton) {
  var		error = 1
      alert("Please select one of the options");
	  return;
  }
  else if (!foundSearchText) {
  	var		error = 1
       alert("Please enter a value for the search");
	    return;
  }

   return foundSelectedButton && foundSearchText; 
		
		if(error == 1) 
		{
			alert(displaymsg);
			return ;
		} 
		if (error != 1)
		{
		submitfuseAction('myFuseaction');		
		}
	}

</script>

Open in new window

Gewgala

Do you know for sure that your for loop is iterating, that the buttons.length conditional has a value greater than 0? It looks to me like the problem is either 1 of 2 things:

1) Your for loop is not iterating and thus your foundSelectedButton variable is never being set to true

or

2) your buttons variable indeed holds radio button objects, but none of them are checked and thus your conditional if (buttons[ i ].checked) is never resulting in a true value. This would cause your foundSelectedButton variable to also remain with an assigned false value.