单选按钮验证不起作用

时间:2016-09-11 22:07:59

标签: javascript html validation

我需要验证单选按钮,我正在努力找到问题的来源。

基本上,当我提交时会发生什么,它不会验证表单及其所有字段。我知道这个函数导致了这个问题,因为当它从.js文件中取出时,表单会正确验证。

以下是我的HTML文件中包含单选按钮的部分

<tr>
    <th align="left">Driver Required: </th>
    <td>
        <input type="radio" name="Driver" value="Yes" id="radio_error"> Yes
    </td>
 </tr>
 <tr>
 <td><br></td>
 <td>
     <input type="radio" name="Driver" value="No" id="radio_error"> No
 </td>
 </tr>
 <tr><th><br></th></tr>
     <tr>
         <th align="left">Insurance: </th>
         <td>
             <input type="radio" name="Insurance" value="None" id="radio_error"> None
          </td>
  </tr>
  <tr>
      <td><br></td>
      <td>
          <input type="radio" name="Insurance" value="CDW" id="radio_error"> Collision Damage Waiver
          <br>
          <input type="radio" name="Insurance" value="LI" id="radio_error"> Liability Insurance
          <br>
          <input type="radio" name="Insurance" value="PAI" id="radio_error"> Personal Accident Insurance
          <br>
          <input type="radio" name="Insurance" value="PEC" id="radio_error"> Personal Effects Coverage
      </td>
  </tr>

以下代码行来自.js文件。我有一个验证功能,我相信这不是问题。

function checkDriverRadio()
{
    var yesOrNo = "";
    var len = document.ClientForm.Drvier.length;
    var i;

    for (i = 0; i < len; i++) 
    {
        if (document.ClientForm.Drvier[i].checked)
        {
            yesOrNo = document.ClientForm.Driver[i].value;
            break;
        }
    }

    if (!document.ClientForm.Driver.checked)
    {
        document.getElementById("radio_error").innerHTML = "No option selected";
        return false;
    }
    else
    {
        document.getElementById("radio_error").innerHTML = "";
        return true;
    }
}

function checkInsuranceRadio()
{
    var option = "";
    var len = document.ClientForm.Insurance.length;
    var i;

    for (i = 0; i < len; i++) 
    {
        if (document.ClientForm.Insurance[i].checked)
        {
            option = document.ClientForm.Insurance[i].value;
            break;
        }
    }

    if (!document.ClientForm.Insurance.checked)
    {
        document.getElementById("radio_error").innerHTML = "No option selected";
        return false;
    }
    else
    {
        document.getElementById("radio_error").innerHTML = "";
        return true;
    }
}

2 个答案:

答案 0 :(得分:0)

我认为有一个拼写错误......

if (document.ClientForm.Drvier[i].checked)
    {
        yesOrNo = document.ClientForm.Driver[i].value;
        break;

....你的文件名是Driver not Drvier。 我希望这会有所帮助。

答案 1 :(得分:0)

我意识到你的所有单选按钮都具有相同的Id,单选按钮按name="someName"分组,你已经完成了其他答案,你需要看一些印刷错误。我在这个小提琴中创建了一个简单的验证,请查看它是否有用。

https://jsfiddle.net/mr_odoom/17xwdL79/