JavaScript Forum

**rapseez** · 08-24-2011, 09:28 PM

Hi guys,

I have a query in regards to a form that I created a while back. I am trying to sort out the Client side validation of it now. I am new to JScripting and PHP just to let you all know. I am learning it all sort of on the go. I have a set of radio buttons that on click open a few hidden textboxes.

Here are some of the things I am trying to do:

1. Check if the radio buttons are selected or not and if not return an alert.

I can handle this part as its easy.

2. Here comes the tricky part. I dont know how to do a check for a specific hidden text box that opens upon clicking a specific radio button.

Example below: Clicking on radio button DHCP opens up a set of text boxes for Ip address, Subnet Mask and Default Gateway. How do I do a validation for these text boxes ?

Can anyone guide me in the right direction ??

Cheers

You can pretty much copy and past this onto a text file and open up on a browser to understand what I am talking about. JScript is included within html.

HTML Code:

<html xmlns="l">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Server</title>
<style type="text/css">
</style>
</head>

<body id="main_body" >

<script type="text/javascript">
    function showstuff(divid)
    {
        document.getElementById(divid).style.display="block";
    }

    function hidestuff(divid)
    {
        document.getElementById(divid).style.display="none";
    }

    //Check to see if the radio buttons are selected for ADDRESSING

function Form1_Validator(theForm)
{
var radioSelected = false;
    for (i = 0;  i < theForm.addressing.length;  i++)
    {
        if (theForm.addressing[i].checked)
        radioSelected = true;
    }
   
    if (!radioSelected)
    {
        alert("Please select one of the \"Addressing\" options.");
        return (false);
    }
}    
    
</script>

<div id="form_container">

<h1><a>New Server</a></h1>
<form id="Form1" method="post" action="" onsubmit="return Form1_Validator(this)" name="Form1" >
                    
    
<ul>

<li id="li_1" >
        <label class="description" for="addressing">Addressing </label>
        <span>
            <input id="dhcp" name="addressing" class="element radio" type="radio" value="DHCP" onclick="hidestuff('manIpDiv');" />
            <label class="choice" for="dhcp">DHCP</label>
           
            <input id="manual" name="addressing" class="element radio" type="radio" value="Manual" onclick="showstuff('manIpDiv');"/>
            <label class="choice" for="manual">Manual</label>
       
        <div id="manIpDiv" style="display:none">
        <font color="#4C787E">
        <br>IP Address:
        <br><input type="text" name="ip1" size="3" maxlength="3">.
            <input type="text" name="ip2" size="3" maxlength="3">.
            <input type="text" name="ip3" size="3" maxlength="3">.
            <input type="text" name="ip4" size="3" maxlength="3">
        <br>Subnet Mask:
            <br><input type="text" name="sm1" size="3" maxlength="3">.
            <input type="text" name="sm2" size="3" maxlength="3">.
            <input type="text" name="sm3" size="3" maxlength="3">.
            <input type="text" name="sm4" size="3" maxlength="3">
        <br>Default Gateway:
            <br><input type="text" name="dg1" size="3" maxlength="3">.
            <input type="text" name="dg2" size="3" maxlength="3">.
            <input type="text" name="dg3" size="3" maxlength="3">.
            <input type="text" name="dg4" size="3" maxlength="3">
        </font>
        </div>   
        </span>
</li>   


<li class="buttons">
    <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
    
</ul>
</form>    
</div>    
</body>
</html>

**rapseez** · 08-25-2011, 02:51 AM

I have figured out the syntax for calling referencing the text boxes within a radio button.

Code:

if (theForm.addressing[0].checked)
    {    
        if (theForm.ip1.value == "")
        {
            alert("Please enter something ");
            theForm.ip1.focus();
            return false;
        }
    }

The ip address format is of this form

100:0:0:1 (example)
or
ip1:ip2:ip3:ip4

How do I validate in a consolidated code if they all have been filled and that too with numbers ?

Thanks.