使用 If Else 语句和 document.getElementByID 进行表单验证答案

【问题标题】：Form Validation with If Else statements and document.getElementByID使用 If Else 语句和 document.getElementByID 进行表单验证
【发布时间】：2017-02-20 15:44:10
【问题描述】：

我是该网站的新手，但上周我一直在互联网上寻找答案，但我似乎找不到答案。

我想要的是表单中的 3 个字段中的 2 个在单击提交按钮时进行验证，而不是转到下一页，它需要在允许之前进行验证。

这就是我所拥有的，

HTML：

function validateForm(input) {
  var isValid = true;
  if (!document.getElementById("Name").value.trim().length) {
    isValid = false;
    alert("Please enter your First Name");
  } else if (!document.getElementById("Comment1").value.trim().length) {
    isvalid = false;
    alert("Please enter your phone number");
  } else {
    return false;
  }
  if (isValid) {
    document.getElementById('ICContainer').style.display;
    loadInstantChat();
  }
}

input[type=submit] {
  position: relative;
  top: 20px;
  width: 322px;
  background-color: #EF423E;
  border-radius: 5px;
  border: none;
  color: white;
  padding: 4px;
  font-family: 'arial';
  font-size: 11pt;
  text-decoration: double;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=text],
[type=number],
[type=email] {
  width: 323px;
  padding: 4px 4px;
  margin: 8px 0;
  box-sizing: border-box;
  border: solid #EF423E 2px;
  border-radius: 5px;
  color: #4E4E56;
  background-color: #f9f9f9;
  font-family: 'arial';
  font-size: 11pt;
}

<body onload="handleRebootOrRefresh();">
  <form name="input" action="#" onsubmit="return validateForm(input)" method="post">
    Your first name:* <input id="Name" type="text" name="inputName"> Your phone number:* <input id="Comment1" type="text" name="inputNumber"> Claim Reference: <input id="Comment2" type="text" name="inputClaim">
    <input type="submit" value="Chat Now" onclick="validateForm(input)">
  </form>

  <div id="ICContainer" style="position: absolute; left: 0px; top: 0px; width: 350px; height: 550px; display: none"></div>
</body>

我不想在这段代码中运行许多其他 JavaScript，但我确实需要知道如何让前 2 个字段进行验证，如果验证成功，它会处理到下一页 (即document.getElementByID('ICContainer').style.display; loadInstantChat();

为了清楚起见，这是一个 LogMeIn Rescue 即时聊天实例，他们的支持线是“不要碰任何东西，即使我们确实为您提供了分步指南”。

【问题讨论】：

标签： javascript html css forms validation

【解决方案1】：

可以使用函数的返回值来阻止表单提交

<form name="myForm" onsubmit="return validateMyForm();">

功能类似

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

【讨论】：

谢谢。但我已经尝试过了。我可以让验证工作，但我不能让它在验证后工作，它调用 document.getElementById('ICContainer').style.display; loadInstantChat();
I can get the validation to work, but I can't get it to work that after validationclear?
所以我需要验证的两个表格，姓名和电话号码会出现一个警告，说明这些框是必需的。如果正确填写了这些框，则不会弹出警报，但不会打开下一个文档/运行下一个脚本。
老实说，这非常复杂，因为我正在使用其他公司的代码，而且发生的很多事情都隐藏在外部 JS 文件中

【解决方案2】：

我认为您需要从表单应答器中删除一些属性：

action="#" onsubmit="return validateForm(input)" method="post"

您可以创建一个调用 validateForm 的新函数 (handleForm)，如果一切正常，则向您的服务器发送 AJAX 请求。

<input type="submit" value="Chat Now" onclick="handleForm(input)">

[...]
function handleForm(input) {
  var isValid = validateForm(input);
  if (isValid) {
    //perform your ajax request here
  }
}

function validateForm(input) { ...

【讨论】：