jQuery表单验证颜色更改？

Question

2 questions. 2个问题。 i am learning form validation in javascript/jQuery 我正在学习javascript / jQuery中的表单验证

1) as you can see when there is not input , background color is pink, but when i start typing the background color is not going away. 1）如您所见，当没有输入时，背景颜色为粉红色，但是当我开始输入时，背景颜色不会消失。 i tried with else if 'remove class' still no good. 如果“删除课程”仍然不好，我尝试了其他方法。 i want to achieve this using jQuery only 我只想使用jQuery来实现

2)(html)when i click sign-up , I want document page to go to a different html page. 2）（html）当我单击注册时，我希望文档页面转到另一个html页面。 how do i achieve this? 我该如何实现？

 $(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"); } });

 #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; }

 <!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>

Answer 1

Answer 1 : If removeClass is not working properly, use removeAttr ie, 答案1：如果removeClass不能正常工作，请使用removeAttr，即

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

Answer 2 : Add function on button click as below : 答案2：按钮点击添加功能如下：

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

Now declare function in your javascript ie, : 现在在您的JavaScript中声明函数，即：

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

jQuery表单验证颜色更改？

问题描述

1 个解决方案

解决方案1
0 2016-11-11 04:37:04

jQuery表单验证颜色更改？

问题描述

1 个解决方案

解决方案1 0 2016-11-11 04:37:04

解决方案1
0 2016-11-11 04:37:04