Validation Text boxes with Radio button options

This question is in reference with
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_26856442.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

Tpaul_10Asked:
Who is Participating?
 
GewgalaConnect With a Mentor Commented:
how about something like this, define a new function that returns the special radio button:

function getSpecialRadioButton() {
        return document.getElementById("yourSpecialRadioButton");
}

Then in your method where you need to validate if the same radio button is selected, you can do:

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

Which will only execute that block if the special radio button is checked AND the textbox fails validation.
0
 
GewgalaCommented:
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;
}

0
 
GewgalaCommented:
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.
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Tpaul_10Author Commented:
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.
0
 
Tpaul_10Author Commented:
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.
0
 
GewgalaCommented:
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;
0
 
GewgalaCommented:
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?
0
 
Tpaul_10Author Commented:
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

0
 
GewgalaCommented:
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;
  }
0
 
Tpaul_10Author Commented:
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

0
 
GewgalaCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.