javascript - Javascript错误消息仅闪烁一秒钟

This question already has answers here:

What is the meaning of onsubmit=“return false”? (JavaScript, jQuery)

(2个答案)

3年前关闭。

我有这个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;

最佳答案

您的表单正在提交，这会导致页面重新加载。这就是为什么您看到消息闪烁一段时间的原因。我在您的JavaScript中看到了注释行//Default behaviour at for FORM is to reload the HTML page //e.preventDefault();
您应该取消注释e.preventDefault()。
将click事件获取为function onSubmit(event)，并将事件传递给checkEmpty。

关于javascript - Javascript错误消息仅闪烁一秒钟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43295124/

上一篇：javascript - 检查 ViewBag 值是否为 null

下一篇：python-3.x - 我试图检查索引是否超出范围，但是我使用的代码给出的索引超出范围？

相关文章：

javascript - Firebase 数据库触发器 - 如何等待调用

javascript - 使用 javascript 提醒元素的 innerHTML

html 类型编号不会重新定位

html - HTML5音频标签不适用于IIS7本地主机

php - 按日期范围对数据进行分组并以表格形式显示查询结果

php - Laravel 返回带有旧输入的页面以进行验证

javascript - 如何设置单击特定单选按钮时需要的选择表单？

javascript - 如何将自定义回调添加到 jquery 插件

javascript - 如何使用 bootstrap 验证表单的字数和字母数字值

java - Grails 验证中的自定义字段名称