0
我想将标签的<input type="text"（和电子邮件）/>和display:的边框从none更改为block。 我想我已经做得正确，但也许我没有完全得到onfocus。 下面的代码：
如何在点击提交按钮后使用“display：block”？
var nameSt = false;
var emailSt = false;
var msgSt = false;
var name_form = document.forms["mailSender"]["name"].value;
var email_form = document.forms["mailSender"]["email"].value;
var msg_form = document.forms["mailSender"]["message"].value;
function namerr() {
nameSt = true;
if (emailSt == true && email_form == null && email_form == "") {
document.getElementById("email_labl").style.display = "block";
}
if (msgSt == true && msg_form == null && msg_form == "") {
document.getElementById("msg_labl").style.display = "block";
}
}
function emailerr() {
emailSt = true;
if (nameSt == true && name_form == null && name_form == "") {
document.getElementById("name_labl").style.display = "block";
}
if (msgSt == true && msg_form == null && msg_form == "") {
document.getElementById("msg_labl").style.display = "block";
}
}
function msgerr() {
msgSt = true;
if (nameSt == true && name_form == null && name_form == "") {
document.getElementById("name_labl").style.display = "block";
}
if (emailSt == true && email_form == null && email_form == "") {
document.getElementById("email_labl").style.display = "block";
}
}#name {
margin-top: 40px;
width: 300px;
height: 22px;
font-family: TikalSansMedium;
font-size: 12pt;
border: 1px solid black;
border-radius: 4px;
text-align: center;
transition: all .1s;
}
#name:focus {
outline: none !important;
border: 3px solid #F8CB18;
}
#number {
width: 300px;
height: 22px;
font-family: TikalSansMedium;
font-size: 12pt;
border: 1px solid black;
border-radius: 4px;
text-align: center;
transition: all .1s;
}
#number:focus {
outline: none !important;
border: 3px solid #F8CB18;
}
#email {
width: 300px;
height: 22px;
font-family: TikalSansMedium;
font-size: 12pt;
border: 1px solid black;
border-radius: 4px;
text-align: center;
transition: all .1s;
}
#email:focus {
outline: none !important;
border: 3px solid #F8CB18;
}
#message {
resize: none;
width: 300px;
height: 100px;
font-family: TikalSansMedium;
font-size: 11pt;
border: 1px solid black;
border-radius: 4px;
transition: all .1s;
}
#message:focus {
outline: none !important;
border: 3px solid #F8CB18;
}
#name_labl,
#email_labl,
#msg_labl {
font-family: Arial;
font-size: 8pt;
color: red;
font-weight: bold;
float: left;
margin-left: 155px;
border: 1px solid red;
}
#name_labl {
display: none;
}
#email_labl {
display: none;
}
#msg_labl {
display: none;
}<form id="mailSender" method="post" action="">
<div id="nameDiv">
<input type="text" id="name" name="name" placeholder="Your Name" onfocus="namerr()">
<br>
<label id="name_labl">This field is required.</label>
</div>
<div id="numDiv">
<input type="text" id="number" name="number" placeholder="Your Mobile Number(Optional)">
<br>
</div>
<div id="mailDiv">
<input type="email" id="email" name="email" placeholder="Your Email" onfocus="emailerr()">
<br />
<label id="email_labl">This field is required.</label>
</div>
<div id="msgDiv">
<textarea id="message" name="message" placeholder="Your Message" class="mCustomScrollbar" data-mcs-theme="minimal-dark" data-mcs-axis="y" onfocus="msgerr()"></textarea>
<br>
<label id="msg_labl">This field is required.</label>
</div>
<br>
<input type="submit" id="contact_submit" name="contact_submit" value="Send Message">
</form>
使用onblur而不是onfocus（我认为）。 – dandavis
同时添加提交事件中的所有测试，并返回false，如果错误 – mplungjan