在不重新加载页面的情况下验证表单

【问题标题】：Validate form without page reload在不重新加载页面的情况下验证表单
【发布时间】：2015-07-31 23:35:24
【问题描述】：

我正在实施一个简单的注册表单。我想验证用户是否至少选择了一个checkbox。除了这个输入字段外，我的表单中的所有字段都经过验证，无需重新加载页面。当我尝试验证此字段时，页面会重新加载，并且用户之前输入的所有值都将丢失。我想防止这种情况发生。

    function validate() {

	var checkbox1 = document.getElementById('three').checked;
	var checkbox2 = document.getElementById('four').checked;
	var checkbox3 = document.getElementById('five').checked;
	var checkbox4 = document.getElementById('six').checked;

	if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
		if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
			alert("Please enter all the required values");
		} 
	} 

	if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
		if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
			alert("Please enter all the required values");
		} 
	} 

	if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
		if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
			alert("Please enter all the required values");
		}  
	} 

	if (document.getElementById('values').value == -1) {
		alert("Please enter all the required values checkbox");
	}
}
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

#labels{
	position: relative;
	width: 250px;
	float: left;
}

h3{
	margin: 0px 0px 20px 0px;
}

#fields{
	position: relative;
	width: 250px;
	float: left;
}

.element{
	margin-bottom: 23px;
	border: 1px solid #dadada;
	border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.different{
	margin-top: 4px;
	margin-bottom: 22px;
}

.values{
	margin-bottom: 23px;
}

.heading, .feedback{
	margin-top: 43px;
}

.preference{
	border-color:  #06a3e9;
	box-shadow: 0 0 1px lightblue;
}

.multiple{
	border-color:  #06a3e9;
	box-shadow: 0 0 1px lightblue;
	margin-top: 20px;
}

textarea{
	margin-top: 20px;
	border: 1px solid  #06a3e9;
	box-shadow: 0 0 1px lightblue;
}

a{
	color: #06a3e9;
}

.final{
	margin-top: 15px;
}

.feedback{
	margin-top: 73px;
}

#submit, #reset{
	border: 1px solid #dadada;
	border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    border-radius:5px;
}

input[type="checkbox"]{
	display: none;
}

label:before{
	width: 1em;
	display: inline-block;
}

label{
	margin-right: 5px;
}

input[type="checkbox"] + label:before{
	font-family: FontAwesome;
  	display: inline-block;
  	content: "\f096";
  	letter-spacing: 5px;
  	color: #06a3e9;
  	display: inline-block;
}

input[type="checkbox"]:checked + label:before{
	content:"\f14a";
	display: inline-block;
	color: #06a3e9;
}

input[type="radio"]{
	display: none;
}

input[type="radio"] + label:before{
	font-family: FontAwesome;
  	display: inline-block;
  	content:"\f10c";
  	font-size: 14px;
  	color: #06a3e9;
  	letter-spacing: 5px;
  	display: inline-block;
}

input[type="radio"]:checked + label:before{
	content:"\f192";
	font-size: 14px;
	display: inline-block;
}
<!doctype html>
<html>

  <head>
    <title> Register here </title>
    <link rel="stylesheet" href="../css/registration.css"/>
    <script src = "../javascript/registration.js"></script>
  </head>

  <body>
        <h1>Event Registration Form</h1>

        <div id="labels">
            <h3>Username</h3>
            <h3>Password</h3>
            <h3>Age</h3>
            <h3>Email</h3>
            <h3>Existing customer?</h3>
            <h3>Select your preferences</h3>
            <h3>Newsletter Preferences</h3>
            <h3 class="heading">Menu Options</h3>
            <h3 class="feedback">Send us your feedback !</h3>
        </div>

        <div id="fields">
            <form action="#" method="get" name="referenceToForm">
                <input type="text" name="Username" id="Username" class="element"required/>
                <input type="password" name="Password" class="element" required/>
                <input type="number" name="Age" class="element" required/>
                <input type="email" name="Email" class="element" required/>

            <div class="different">
              <input type="radio" name="customer" id="one" checked="checked" />
              <label for="one">Yes</label>
              <input type="radio" name="customer" id="two" />
              <label for="two">No</label>
            </div>

            <div class="values">
              <input type="checkbox" name="interest" id="three" />
              <label for="three">Dog</label>
              <input type="checkbox" name="interest" id="four" />
              <label for="four">Cat</label>
              <input type="checkbox" name="interest" id="five" />
              <label for="five">Parrot</label>
              <input type="checkbox" name="interest" id="six" />
              <label for="six">Possum</label>
              <span id="spanning"> </span>
            </div>

            <select class="preference" id="preference" value="-1">
                <option value="Entertainment">Entertainment</option>
                <option value="Technology">Technology</option>
                <option value="TV">TV</option>
            </select>
        
            <div class="menu">
                <select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
                    <option value="Sports">Sports</option>
                    <option value="Politics">Politics</option>
                    <option value="News">News</option>
                    <option value="Swimming">Swimming</option>
                    <option value="Health">Health</option>
                </select>
            </div>
        
            <textarea rows="5" cols="20" required></textarea>
        
            <div class="final">
                <input type="submit" name="submit" id="submit" onclick="validate()" />
                <input type="reset" name="reset" id="reset" />
            </div>
      </form>
    </div>
  </body>
</html>

更新

感谢所有试图帮助我的人。下面是完美解决我的问题的代码。 

<!doctype html>
<html>

  <head>
    <title> Register here </title>
    <link rel="stylesheet" href="../css/registration.css"/>
    <script src = "../javascript/registration.js"></script>
  </head>

  <body>
        <h1>Event Registration Form</h1>

        <div id="labels">
            <h3>Username</h3>
            <h3>Password</h3>
            <h3>Age</h3>
            <h3>Email</h3>
            <h3>Existing customer?</h3>
            <h3>Select your preferences</h3>
            <h3>Newsletter Preferences</h3>
            <h3 class="heading">Menu Options</h3>
            <h3 class="feedback">Send us your feedback !</h3>
        </div>

        <div id="fields">
            <form action="#" method="get" name="referenceToForm">
                <input type="text" name="Username" id="Username" class="element"required/>
                <input type="password" name="Password" class="element" required/>
                <input type="number" name="Age" class="element" required/>
                <input type="email" name="Email" class="element" required/>

            <div class="different">
              <input type="radio" name="customer" id="one" checked="checked" />
              <label for="one">Yes</label>
              <input type="radio" name="customer" id="two" />
              <label for="two">No</label>
            </div>

            <div class="values">
              <input type="checkbox" name="interest" id="three" />
              <label for="three">Dog</label>
              <input type="checkbox" name="interest" id="four" />
              <label for="four">Cat</label>
              <input type="checkbox" name="interest" id="five" />
              <label for="five">Parrot</label>
              <input type="checkbox" name="interest" id="six" />
              <label for="six">Possum</label>
              <span id="spanning"> </span>
            </div>

            <select class="preference" id="preference" value="-1">
                <option value="Entertainment">Entertainment</option>
                <option value="Technology">Technology</option>
                <option value="TV">TV</option>
            </select>

            <div class="menu">
                <select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
                    <option value="Sports">Sports</option>
                    <option value="Politics">Politics</option>
                    <option value="News">News</option>
                    <option value="Swimming">Swimming</option>
                    <option value="Health">Health</option>
                </select>
            </div>

            <textarea rows="5" cols="20" required></textarea>

            <div class="final">
                <input type="submit" name="submit" id="submit" onclick="return validate()" />
                <input type="reset" name="reset" id="reset" />
            </div>
      </form>
    </div>
  </body>
</html>

CSS

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

#labels{
    position: relative;
    width: 250px;
    float: left;
}

h3{
    margin: 0px 0px 20px 0px;
}

#fields{
    position: relative;
    width: 250px;
    float: left;
}

.element{
    margin-bottom: 23px;
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.different{
    margin-top: 4px;
    margin-bottom: 22px;
}

.values{
    margin-bottom: 23px;
}

.heading, .feedback{
    margin-top: 43px;
}

.preference{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.multiple{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    margin-top: 20px;
}

textarea{
    margin-top: 20px;
    border: 1px solid  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

a{
    color: #06a3e9;
}

.final{
    margin-top: 15px;
}

.feedback{
    margin-top: 73px;
}

#submit, #reset{
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    border-radius:5px;
}

input[type="checkbox"]{
    display: none;
}

label:before{
    width: 1em;
    display: inline-block;
}

label{
    margin-right: 5px;
}

input[type="checkbox"] + label:before{
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 5px;
    color: #06a3e9;
    display: inline-block;
}

input[type="checkbox"]:checked + label:before{
    content:"\f14a";
    display: inline-block;
    color: #06a3e9;
}

input[type="radio"]{
    display: none;
}

input[type="radio"] + label:before{
    font-family: FontAwesome;
    display: inline-block;
    content:"\f10c";
    font-size: 14px;
    color: #06a3e9;
    letter-spacing: 5px;
    display: inline-block;
}

input[type="radio"]:checked + label:before{
    content:"\f192";
    font-size: 14px;
    display: inline-block;
}

JavaScript

function validate() {



var checkbox1 = document.getElementById('three').checked;
    var checkbox2 = document.getElementById('four').checked;
    var checkbox3 = document.getElementById('five').checked;
    var checkbox4 = document.getElementById('six').checked;

    if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
            alert("Please enter all the required values");
            return false;
    } 
}

【问题讨论】：

  • 看到这个答案：stackoverflow.com/questions/15360094/…
  • 在旁注中，我建议您使用某种验证脚本而不是重新发明轮子，就像如果您使用的是 Jquery，这对我来说非常方便。 bojanmauser.from.hr/bvalidator
  • @9kSoft 这很有帮助。但是，我想学习如何使用核心 JavaScript 来验证表单，这就是我这样做的原因。
  • @user3421311 好吧，如果你这样做是为了学习，那没关系，我的想法是，如果你在项目的最后期限内，然后浪费你的时间摆弄前端验证（这没什么不仅仅是用户界面的装饰，而且没有任何安全性）将是您想要避免的事情。只是我的想法。 ;)
  • @user3421311，您可以在复选框更改为 true 或 false 时修改 required 属性，具体取决于。这样你仍然使用原生表单验证。

标签： javascript html


【解决方案1】：

我发现您的表单有 2 个问题，而且都很容易解决。

您的验证函数必须返回 true 以提交表单或返回 false 以取消。如果您不提供返回值，就像在您的代码中一样，表单将始终被提交：

<input type="submit" name="submit" id="submit" onclick="validate()" >

要解决这个问题，您需要让验证函数返回一个值，该值会返回到 onclick 处理程序：

<input type="submit" name="submit" id="submit" onclick="return validate()" >

验证函数中的这一行会引发错误，因为没有 id="values" 的元素。您需要删除或修复此代码，以便您的函数正常完成并返回 true 或 false 值。

if (document.getElementById('values').value == -1) {
    alert("Please enter all the required values checkbox");
}

也许有人可以对此发表评论，但我总是看到在表单 onsubmit 事件而不是提交按钮 onclick 事件中处理验证。然而，也许这只是惯例，因为它似乎可以以任何一种方式工作：

<form onsubmit="return validate()" ...

<input type="submit" onclick="return validate()" ...

【讨论】：

  • 谢谢你我想通了。
【解决方案2】：

如果你使用的是 jsFiddle，最主要的是使用这种初始化函数的方法：

window.validate = function() {

不是这样的：

function validate() {

这是我的尝试。没有使用 Angular，也没有使用 JQuery，尽管我建议学习它们中的每一个。我弄乱了你的提交按钮，但它很容易用 css 修复。我还添加了一个仅触发验证的虚假提交按钮。如果通过验证，则可以继续发送。我的 jsfiddle：

http://jsfiddle.net/omikey/tfk7d3ks/

<div class="container">
 <div id="labels">
        <h3>Username </h3>
        <h3>Password</h3>
        <h3>Age</h3>
        <h3>Email</h3>
        <h3>Existing customer?</h3>
        <h3>Select your preferences</h3>
        <h3>Newsletter Preferences</h3>
        <h3 class="heading">Menu Options</h3>
        <h3 class="feedback">Send us your feedback !</h3>
     </div>

    <div id="fields">
      <form action="#" method="get" name="referenceToForm">
        <div>
          <input type="text" name="Username" id="Username" class="element" required/>
        </div>
        <div>
          <input type="password" name="Password" class="element" required/>
        </div>
        <div>
          <input type="number" name="Age" class="element" required/>
        </div>
        <div>
          <input type="email" name="Email" class="element" required/>
        </div>
        <div class="different">
          <input type="radio" name="customer" id="one" checked="checked" />
          <label for="one">Yes</label>
          <input type="radio" name="customer" id="two" />
          <label for="two">No</label>
        </div>

        <div class="value">
          <input type="checkbox" name="interest" id="three" />
          <label for="three">Dog</label>
          <input type="checkbox" name="interest" id="four" />
          <label for="four">Cat</label>
          <input type="checkbox" name="interest" id="five" />
          <label for="five">Parrot</label>
          <input type="checkbox" name="interest" id="six" />
          <label for="six">Possum</label>
          <span id="spanning"> </span>
        </div>

        <div>
          <select class="preference" id="preference" value="-1">
            <option value="Entertainment">Entertainment</option>
            <option value="Technology">Technology</option>
            <option value="TV">TV</option>
          </select>
        </div>

        <div class="menu">
          <select multiple id="multiple" class="multiple" value="-1" name="usrgrp[]">
            <option value="Sports">Sports</option>
            <option value="Politics">Politics</option>
            <option value="News">News</option>
            <option value="Swimming">Swimming</option>
            <option value="Health">Health</option>
          </select>
          <span id="spanElement"> </span>
        </div>

        <div class="comment">
          <textarea rows="5" cols="20" required></textarea>
        </div>

        <div class="final">
            <input type="button" name="verify" onclick="validate()" />
          <input type="submit" name="submit" style="display:none" id="submit" />
          <input type="reset" name="reset" id="reset" />
        </div>
      </form>
    </div>
</div>
    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

.container{
    width: 100%;
    margin-left: 400px;
}

#spanning{
    color: #06a3e9;
}

.nav ul{
    width: 150px;
    float: left;
    background-color: #dadada;
    padding: 0px;
    margin: 0px;
}

.nav li{
    list-style-type: none;
}

.nav a{
    color:#000;
    cursor:pointer;
    display: block;
    line-height: 40px;
    text-indent: 10px;
    text-decoration: none;
    font-weight: bold;
}

.nav ul ul li{
    display: none;
}

.nav li:hover ul li{
    display: block;
}

.subnav ul{
    position: relative;
    background: #dadada;

}

#labels{
    position: relative;
    width: 250px;
    top:80px;
    float: left;
}

h3{
    margin: 0px 0px 20px 0px;
}

#fields{
    position: relative;
    width: 250px;
    top:80px;
    float: left;
}

.element{
    margin-bottom: 23px;
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.different{
    margin-top: 4px;
    margin-bottom: 22px;
}

.value{
    margin-bottom: 23px;
}

.heading, .feedback{
    margin-top: 43px;
}

.preference{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.multiple{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    margin-top: 20px;
}

textarea{
    margin-top: 20px;
    border: 1px solid  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

a{
    color: #06a3e9;
}

.final{
    margin-top: 15px;
}

.feedback{
    margin-top: 73px;
}

#submit, #reset{
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    border-radius:5px;
}

input[type="checkbox"]{
    display: none;
}

label:before{
    width: 1em;
    display: inline-block;
}

label{
    margin-right: 5px;
}

input[type="checkbox"] + label:before{
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 5px;
    color: #06a3e9;
    display: inline-block;
}

input[type="checkbox"]:checked + label:before{
    content:"\f14a";
    display: inline-block;
    color: #06a3e9;
}

input[type="radio"]{
    display: none;
}

input[type="radio"] + label:before{
    font-family: FontAwesome;
    display: inline-block;
    content:"\f10c";
    font-size: 14px;
    color: #06a3e9;
    letter-spacing: 5px;
    display: inline-block;
}

input[type="radio"]:checked + label:before{
    content:"\f192";
    font-size: 14px;
    display: inline-block;
}

    window.validate = function() {

    var valid = true;

  var checkbox1 = document.getElementById('three').checked;
  var checkbox2 = document.getElementById('four').checked;
  var checkbox3 = document.getElementById('five').checked;
  var checkbox4 = document.getElementById('six').checked;

  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }
  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }
  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }    

    if (document.getElementById('multiple').value == -1)
    {
      alert("Please enter all the required values");
        valid = false;
    }

    if (document.getElementById('preference').value == -1)
    {
      alert("Please enter all the required values");
        valid = false;
    }

    if (valid)
    {
        document.getElementById('submit').click();
    }
}

【讨论】：

  • 这很有帮助，但是在填写完所有字段后，按钮没有做任何事情。当至少有一个字段为空时，它会显示警报框，因此部分功能可以正常工作。
  • 谢谢。这真的很有帮助，但是如果用户最后选中复选框，页面仍然会重新加载。我的意思是，如果我们在按以下顺序填写表格后单击提交按钮：用户名、密码、年龄、电子邮件、现有客户、时事通讯偏好、菜单选项，请将您的反馈发送给我们；警告框不会弹出，它会提交让用户注册的表单，而无需选中至少一个复选框。
  • 我知道它是什么，看看这个：jsfiddle.net/omikey/tfk7d3ks/8 所以基本上你为复选框编写的 if 语句都是检查相同的东西。现在有一个 if 语句检查是否选中了任何框，如果没有，则表单无效。
  • 这真的很有帮助。你能解释一下你的 eventFire 方法在做什么吗？
  • EventFire，可以看到，它有两个参数，el和etype；这些分别是“dom element”和“event type”的缩写。第一个 if 语句，我最好的猜测是它会在一些我无法测试的旧浏览器上触发指定的“事件类型”（例如鼠标悬停、单击等）。但是，在 else 语句中，首先创建了一个名为 evObj 的“事件对象”并任意命名为“事件”。需要事件对象来模拟点击等事件，这在我们的案例中很有用（我们的提交按钮是隐藏的）。最后，这个对象被分派到提供给方法的隐藏提交上。
猜你喜欢
  • 1970-01-01
  • 2013-08-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-02
  • 2016-12-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode