Javascript在onclick上验证两个控件，但如果只有一个控件验证，则不保留值

Javascript validating two controls onclick but not retaining value if only one control validates

本文关键字：控件 验证 如果 保留 有一个 两个 onclick Javascript      更新时间：2023-09-26

我正在通过一次onclick验证两个控件。这两种控制都是强制性的。

Onclick调用validateLocation函数，如果该函数有效，则调用validateForm函数。

我的问题：

如果用户选择了一个状态并单击提交，那么Javascript就会正常工作，非常完美。

但是

如果用户选择了一个研讨会位置，但没有状态，javascript将启动，但已对该位置进行的选择将被清除。我需要这个选择来保持选中状态，这样用户就不必重复点击。

我的问题：

如果只满足两个标准中的一个，我如何保留这些值？

以下代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type ="text/javascript" language="javascript">
<!--
function validateLocation() {
var radios = document.getElementsByName('RadioGroup1')
for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
    validateForm();
    return true;
    }
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Required';
alert("Please select a seminar location");
return false;
}
function validateForm() {
if(document.form1.State.selectedIndex==0)
{
alert("Please select a State");
document.form1.State.focus();
return false;
}
return true;
};
-->
</script>
</head>
<body>
<div>
<form name="form1" onSubmit="return validateLocation();">
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:right">state:&nbsp;</td>
<td>    
    <select name="State" id="State">
        <option value="">Select</option>
        <option value="AK">AK</option>
        <option value="AL">AL</option>
        <option value="AR">AR</option>
    </select>
</td>
</tr>
</table>
</div>
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2"><strong>Choose a seminar location</strong></td>
</tr>
<tr>
    <td valign="top">
      <input type="radio" name="RadioGroup1" value="Fayetteville Senior Center" id="RadioGroup1_0">
      </td>
    <td><strong>Location One</strong></td>
</tr>
<tr>
    <td valign="top">
      <input type="radio" name="RadioGroup1" value="Springdale Holiday Inn" id="RadioGroup1_1">
      </td>
    <td><strong>Location Two</strong></td>
</tr>
<tr>
    <td valign="top">
      <input type="radio" name="RadioGroup1" value="The Riordan Hall" id="RadioGroup1_2">
      </td>
    <td><strong>Location Three</strong></td>
</tr>
</table>
<div id="ValidationError" name="ValidationError"></div>
</div>
<div>
<input type="submit" name="button" id="button" value="Submit">
</div>
</form>
</div>
</body>
</html>

我稍微修改了脚本，使其更符合逻辑：

<script type ="text/javascript" language="javascript">
function validateLocation() {
  var radios = document.getElementsByName('RadioGroup1')
  for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        return true;
      }
  };
  // not checked, show error
  document.getElementById('ValidationError').innerHTML = 'Required';
  alert("Please select a seminar location");
  return false;
}
function validateState() {
  if(document.form1.State.selectedIndex==0)
  {
    alert("Please select a State");
    document.form1.State.focus();
    return false;
  }
  return true;  
}
function validateForm() {
  if (!validateState() || !validateLocation()) return false;
  return true;
};
</script>

您只需要将表单标记中的onSubmit处理程序更改为：

...onSubmit="return validateForm();"...

然后，表单将被验证，而不是提交，直到两次验证都成功。

希望能有所帮助，

欢呼，Daniel

相关文章：