单选按钮选择的JavaScript验证和基于单选按钮表单提交

时间:2014-08-23 05:51:15

标签: javascript html forms validation

首先问题是有一些单选按钮。基于单选按钮的选择并有一些输入值。如何验证输入值。这是我的代码请帮助我。

<form name="buychips" action="sample.php" method="POST" style="height:400px;" onsubmit ="return validate();">  
            <table width="450" height="40">
                <tr style="line-height: 20px;"> 
                    <td width="131" >Redeem Amount</td>
                    <td><input type="text" name="amount" id="amount" /> <input type="hidden" name="amount_real" id="amount_real"  value='400.00'/> </td>                    
                </tr>
                <tr style="line-height: 20px;">
                    <td></td><td width="126" style="font-size: 14px;"><span id = "amountspan" name = "amountspan" style = "display:none; padding:5px 0px 0px 0px;" class = "makeRed"></span></td>   
                </tr>
                <tr style="line-height: 20px;">
                    <td></td><td style="font-size:12px;">(Min:INR 200/- , Max: INR 10,000/-)</td>
                </tr>
            </table>    
            <div class="colu2">
                <div class="co2">
                                    <table width="400">
                                    <input type="radio" name="select_type" id="select_type" value="1"/>
                                    <tr>
                                        <td>Bank</td>
                                        <td>:</td>
                                        <td><span class="red"><input type="hidden" name="fm1_bankname" value=ICICI Bank/>ICICI Bank</span></td>
                                    </tr>
                                    <tr>
                                        <td>Branch</td>
                                        <td>:</td>
                                        <td><span class="red" ><input type="hidden" name="fm1_banchname" value=kphp/>kphp</span></td>
                                    </tr>
                                    <tr>
                                        <td>Account No</td>
                                        <td>:</td>      
                                        <td><span class="red"><input type="hidden" name="fm1_accountno" value=123456789>123456789</span></td>
                                    </tr>
                                    </table>
                                </div>
                                <div class="clr"></div><div class="acco"><a href="#">Add another bank account</a></div><div class="co2">
                    <table>
                        <input type="radio" name="select_type" id="select_type" value="0"/>
                        <tr>
                            <td height="40">Bank</td>
                            <td>:</td>
                            <td><select name="bank" id="selectbox">
                            <option>Please Select Bank</option>
                            <option>xxx Bank</option>
                            <option>Sxxxx Bank</option>
                            <option>xxxxxx Bank</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td height="40">Branch</td>
                            <td>:</td>
                            <td><input type="text" name="branch"  id="branch" /></td>
                        </tr>
                        <tr>
                            <td height="40">Account No</td>
                            <td>:</td>
                            <td><input type="text" name="account"  /></td>
                        </tr>
                        <tr>
                            <td height="40">Confirm Account No</td>
                            <td>:</td>
                            <td><input type="text" name="confirmacc"  /></td>
                        </tr>
                        <tr>
                            <td height="40">IFSC Code</td>
                            <td>:</td>
                            <td><input type="text" name="ifsccode"  /></td>
                        </tr>
                        <tr>
                            <td height="40">MMID</td>
                            <td>:</td>
                            <td><input type="text" name="mmid"  /><img src="images/question.jpg" alt="question" /></td>
                        </tr>
                        <tr>
                            <td height="40">PAN Card No.**</td>
                            <td>:</td>
                            <td><input type="text" name="panno"  /></td>
                        </tr>
                        <tr>
                            <td height="40">Upload PAN Card**</td>
                            <td>:</td>
                            <td><input type="file" name="card"  /></td>
                        </tr>                       
                    </table>
                </div><div class="" align="center"><span id="error" style="color:red;"> </span></div><div class="" align="center"><tr>
                            <td height="40"></td>
                            <td></td>
                            <td><button type="submit" name="submit" value="" class="submit1" onclick="validate();return false;"></button></td>
                        </tr></div><div class="" align="center" style="color:green;"></div>             
            </div>
        </form>

和我的验证脚本。

<script type="text/javascript">
     function validate()
     {
            var rt_type;    
            var str1 = parseInt(document.getElementById('amount').value);   
            var str2 = parseInt(document.getElementById('amount_real').value);

            if(document.getElementById('amount').value == "")
            {
                document.getElementById('amount').style.borderColor  = 'red';
                document.getElementById('amountspan').style.display  = '';
                     document.getElementById('amountspan').innerHTML = 'Please enter amount.';
                rt_type = false;
                     }
             else if(str1 > str2)
            {
                document.getElementById('amount').style.borderColor  = 'red';
                document.getElementById('amountspan').style.display  = '';
                document.getElementById('amountspan').innerHTML = 'You desnot have enough chips';
                rt_type = false;
            }               
                  else if(document.getElementById('amount').value < 200)
            {
                document.getElementById('amount').style.borderColor  = 'red';
                document.getElementById('amountspan').style.display  = '';
                document.getElementById('amountspan').innerHTML = 'Please enter amount grater than 199.';
                rt_type = false;
            }
            else if(document.getElementById('amount').value > 10000)
            {
                document.getElementById('amount').style.borderColor  = 'red';
                document.getElementById('amountspan').style.display  = '';
                document.getElementById('amountspan').innerHTML = 'Please enter amount less than 10,000.';
                rt_type = false;
            }           
            else if(document.getElementsByName("select_type") != null)
            {
                 var radios = document.getElementsByName("select_type");
                 var formValid = false;

                       var i = 0;
                     while (!formValid && i < radios.length) 
                     {
                          if (radios[i].checked) 
                          formValid = true;
                         i++;        
                     }
                     if (!formValid)
                     {      
                        document.getElementById('error').innerHTML ="Please select the Radio button";
                        rt_type = false;    
                     }


            } 

            return rt_type;
        }
        function changecolor(txtid, spanid)
        {
            document.getElementById(txtid).style.borderColor  = '';
            document.getElementById(spanid).style.display  = 'none';
        }
</script>

我们如何验证单选按钮选择的内部字段。谢谢。

0 个答案:

没有答案