Question

我有这个HTML项目验证一个空表单。错误显示在输入侧，但只闪烁一秒钟。我只想要一次显示消息的错误

这是我的HTML代码，其中包含必要的链接：

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
     <title>JavaScript - JQuery </title>
     <link rel="stylesheet" type="text/css" href="contactform.css">

    </head>
     <body>
     <h1 id="pageheading">Zedland Health Authority</h1>
     <h2 class="sectionheading">Contact Form</h2>
     <form id="register">
     <fieldset id="controls">
     <div>
        <label class="formlabel" for="fname">First Name: </label>
        <input id="fname" type="text" size="30" placeholder="First name" 
        autofocus>
        <p id="fname-error" class="error" style="display:none; color:red;">* 
        You must enter a first name.</p>
    </div>
    <div>
     <label class="formlabel"for="lname">Last Name: </label>
     <input id="lname" type="text" size="30">
     <p id="lname-error" class="error" style="display:none; color:red;">* 
     You must enter a Last name.</p>
    </div>
    <div>
    <label class="formlabel" for="title">Title: </label>
    <select id="title">
       <option value="Mr">Mr.</option>
       <option value="Ms">Ms.</option>
       <option value="Mrs">Mrs.</option>
       <option value="Miss">Miss.</option>
       <option value="Master">Master.</option>
    </select>
    </div>
    <div>
     <label class="formlabel" for="heathauthoritynumber"><span>
     <img src="tooltip.png" id="qmark" alt="Hint"></span>
     Health Authority Number: 
     </label>
     <input id="healthauthoritynumber" type="text" size="10">
     <p id="hn-error" class="error" style="display:none; color:red;">*You 
     must enter a Health Authority Number eg('ZHA345742)</p>
     <div class="tooltip" id="ttip">If you do not know your ZHA number 
    ,please contact your GP</div>
     </div>
   <div>
   <label class="formlabel" for="email">Email: </label>
   <input id="email" type="text" size="40">
   <p id="email-error" class="error" style="display:none; color:red;">You 
     must enter email</p>
   </div>
   <div>
     <label class="formlabel" for="telephone">Telephone Number: </label>
     <input id="telephone" type="text" size="40">
     <p id="tele-error" class="error" style="display:none; color:red;">You 
     must enter a telephone</p>
   </div>
   <div class="formlabel">
    <input id="submit-button" type="submit" value="Submit" >
   </div>
   </fieldset>
   </form>
   <script src="contactform.js"></script>
   </body>
   </html>

这是我的Javascript

   function onSubmit(){
   console.log("ive been submitted");

 checkEmpty(document.getElementById('fname'),document.getElementById("fname-error"));
checkEmpty(document.getElementById('lname'),document.getElementById("lname-error"));
checkEmpty(document.getElementById('healthauthoritynumber'),document.getElementById("hn-error"));
checkEmpty(document.getElementById('email'),document.getElementById("email-error"));
checkEmpty(document.getElementById('telephone'),document.getElementById("tele-error"));
//checkValidHealthID(document.getElementById('healthauthoritynumber'),document.getElementById("hn-error"));
}


// Read about regular expressions using: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions
// and http://stackoverflow.com/questions/25155970/validating-uk-phone-number-regex-c
function checkValidHealthID(inputID, errorID){
var re = new RegExp('/ZHA\d{6}$/');
if((inputID.value)!== re){
    errorID.style.display = "inline";
}else
{
    errorID.style.display = "none";
  }

}

function checkEmpty(inputID, errorID){
//Default behaviour at for FORM is to reload the HTML page
//e.preventDefault();
console.log("checking empty");
if((inputID.value === "") || (inputID.value.length === 0)){
    console.log("empty!!");
    errorID.style.display = "inline";
}
else
{
    errorID.style.display = "none";
 }
}

 function textHint(txtElem, defaultText) {
  txtElem.value = defaultText;
  txtElem.style.color = "#A8A8A8";
  txtElem.style.fontStyle = "italic";
  txtElem.onfocus = function() {
    if (this.value === defaultText) {
        this.value = "";
        this.style.color = "#000";
        this.style.fontStyle = "normal";
    }
}
  txtElem.onblur = function() {
     if (this.value === "") {
        this.value = defaultText;
        this.style.color = "#A8A8A8";
        this.style.fontStyle = "italic";
     }
   }
 }

 function textHints() {
 //textHint(document.getElementById("firstName"), "Enter your first name");
   textHint(document.getElementById('lname'), "Enter your last name");
   textHint(document.getElementById('healthauthoritynumber'), "for eg 
  ,ZHA346783");
   textHint(document.getElementById('email'), "Enter your email");
   textHint(document.getElementById('telephone'), "Enter your telephone 
  number");
}

function switchToolTip() {           
document.getElementById('qmark').onmouseover = function() {
var toolTip = document.getElementById('ttip');
 toolTip.style.display='block';
}       
 document.getElementById('qmark').onmouseout = function() {
 var toolTip = document.getElementById('ttip');
 toolTip.style.display='none';
  }     
}   

//windows.onload=textHints();
//windows.onload=switchToolTip();
//window.onload=init;
 document.getElementById("submit-button").onclick = onSubmit;

Answer 1

您的表单已提交，导致页面重新加载。这就是为什么你看到消息闪烁一段时间的原因。我在JavaScript中看到了注释行 //Default behaviour at for FORM is to reload the HTML page //e.preventDefault();

你应该取消注释e.preventDefault()。将点击事件抓取为function onSubmit(event)，然后将事件传递给checkEmpty。

Javascript错误消息只闪烁一秒钟

1 个答案: