i want change border of <input type="text"(and email)/> , display: of label none block. think i've done correctly, maybe i'm not quite getting onfocus fully. here's code:
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: .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: .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: .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: .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 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 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 required.</label> </div> <br> <input type="submit" id="contact_submit" name="contact_submit" value="send message"> </form>
onfocus executed once user clicks/tabs , sets focus given element. want change onfocus onblur (which gets executed once user clicks/tabs on element , leaves current field).
onfocus: user sets focus on given element.
onblur: user "leaves" given element.
Comments
Post a Comment