Fatal编程技术网
  • javascript/
  • Javascript错误消息仅闪烁一秒钟

Javascript错误消息仅闪烁一秒钟

javascript html validation error-handling

Javascript错误消息仅闪烁一秒钟,javascript,html,validation,error-handling,Javascript,Html,Validation,Error Handling,我有一个验证空表单的HTML项目。错误显示在输入侧，但仅闪烁一秒钟。我只希望消息的错误显示一次 这是我的HTML代码，带有必要的链接： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript - JQuery </title> <link rel="stylesheet" type=

我有一个验证空表单的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中看到了注释行 
//表单的默认行为是重新加载HTML页面
//e、 预防默认值（）

您应该取消注释
e.preventDefault（）
。

在submit（event）
上抓取click事件作为
函数，并将事件传递给
checkEmpty
否，将不使用
e.preventDefault（）如果你不认为这是一个骗局，请告诉我，骗局链接的答案不会有帮助

   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;