Question

2个问题。我正在javascript / jQuery中学习表单验证

1）正如你可以看到没有输入时，背景颜色是粉红色，但是当我开始输入时，背景颜色不会消失。我尝试过，如果＆＃39;删除课程＆＃39;仍然没有好处。我想用jQuery实现这个

2）（html）当我点击注册时，我希望文档页面转到另一个html页面。我怎么做到这一点？

＆＃13;

$(document).ready(function(){
	if($("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").val(null)){
		$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").addClass("bordercoloron");
	}
});

＆＃13;

#wraper {
	margin: 0 auto;
	height: 4000px;
	width: 1000px;
	border: 2px solid black;
}
#wholeform {
	margin: 0 auto;
	height: 600px;
	width: 400px;
	border: 2px solid grey;
}
#fnameid, #Lnameid {
	height: 50px;
	width: 172px;
	border: none;
	position: relative;
	left: 0.5%;
	margin-top: 3%;
	padding-left: 5%;
	font-size: 20px;
}
#emailid, #phoneid {
	height: 50px;
	width: 372px;
	border: none;
	position: relative;
	left: 0.5%;
	font-size: 20px;
	padding-left: 5%;
	letter-spacing: 9px;
	margin-top: 5%;
}
#dob-day, #dob-month, #dob-year {
	height: 50px;
	width: 120px;
	position: relative;
	left: 4%;
	border: none;
	font-size: 20px;
	margin-top: 5%;
	color: darkgray
}
#mf {
	height: 55px;
	width: 350px;
	position: relative;
	left: 4%;
	border: none;
	font-size: 50px;
	margin-top: -2%;
	padding-left: 5%;
	letter-spacing: 10px;
	color: darkgray
}
.bordercoloron {
	background-color: coral;
}
.bordercoloroff {
	border: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="    crossorigin="anonymous"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/jexercise.css">
</head>

<body>
<div id="wrap">
  <div id="mainbox">
    <form  id="wholeform">
      <input type="text" placeholder="FirstName" name="fname" id="fnameid">
      <input type="text" placeholder="LastName" name="Lname" id="Lnameid">
      <input type="text" placeholder="Email@example.com" name="email" id="emailid">
      <input type="text" placeholder="Mobile Phone Number" name="fname" id="phoneid">
      <select name="dob-day" id="dob-day">
        <option value="">Day</option>
        <option value="">---</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      <select name="dob-month" id="dob-month">
        <option value="">Month</option>
        <option value="">-----</option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="dob-year" id="dob-year">
        <option value="">Year</option>
        <option value="">----</option>
        <option value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
        <option value="2004">2004</option>
        <option value="2003">2003</option>
        <option value="2002">2002</option>
        <option value="2001">2001</option>
        <option value="2000">2000</option>
        <option value="1999">1999</option>
        <option value="1998">1998</option>
        <option value="1997">1997</option>
        <option value="1996">1996</option>
        <option value="1995">1995</option>
        <option value="1994">1994</option>
        <option value="1993">1993</option>
        <option value="1992">1992</option>
        <option value="1991">1991</option>
      </select>
      <h3 style="font-size:20px; position: relative; left:5%; width:70px;color:darkgray;">Gender:</h3>
      <select id="mf">
        <option>Male</option>
        <option>Female</option>
      </select>
      <input type="button" id="submit" style="background-color:#2196F3;border-radius:5px;border:2px #2196F3;position:relative; margin-top:25%;left:25%;width:200px;height:80px;font-size:50px;color:darkgray; padding-left:5%;" value="SignUp">
    </form>
  </div>
</div>
<script src="../js/jexercise.js"></script>
</body>
</html>

＆＃13;

Answer 1

答案1：如果removeClass无法正常工作，请使用removeAttr ie，

$("#fnameid,#Lnameid,#emailid,#phoneid,#dob-day,#dob-month,#dob-year,#mf").removeAttr("class");

答案2：按钮点击添加功能如下：

<input type="button" id="submit" onClick="myFunc()"  value="SignUp">

现在在你的javascript中声明函数，即：

var myFunc = function(){
 window.location.href = 'Redirection Link';
}

jQuery表单验证颜色变化？

1 个答案: