jQuery Изменение формы проверки цвета?

2 вопроса. Я изучаю форму проверки в javascript/jQueryjQuery Изменение формы проверки цвета?

1) как вы можете видеть, когда нет ввода, цвет фона розовый, но когда я начну печатать, цвет фона не исчезнет. я попытался с else, если «удалить класс» по-прежнему не годится. Я хочу достичь этого, используя только jQuery

2) (html), когда я нажимаю кнопку регистрации, я хочу, чтобы страница документа переходила на другую страницу html. как мне это достичь?

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

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

источник

2016-11-11 Anu Rajan

Что означает '$ ('# fnameid, ...'). Val (null)'? –

все те теги ввода. поэтому, если нет текстов (нуль), цвет должен быть включен, если текст отсутствует, цвет –

Ссылка, как использовать метод val(): http://api.jquery.com/val/ Вы можете прочитать его, прежде чем продолжать делать следующий шаг –

Ответ 1: Если removeClass не работает должным образом, использовать removeAttr т.е.

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

источник

2016-11-11 04:37:04

страница перенаправления работает как очарование, спасибо. но изменить removeattribute еще не –

Не знаю почему, но этот код removeAttr() работает правильно на моей стороне. Проверьте его один раз. –

jQuery Изменение формы проверки цвета?

ответ

Смежные вопросы