JavaScript表單驗證框突出顯示
[英]JavaScript form validation box highlighting
問題描述
JavaScript的：
function validateForm(){
var getNoun = document.formPG.fNoun.value;
var getVerb = document.formPG.fVerb.value;
var getPronoun = document.formPG.fPronoun.value;
var getAdverb = document.formPG.fAdverb.value;
var getAdjective = document.formPG.fAdjective.value;
var getSillyWord = document.formPG.fSillyWord.value;
var getMagic = document.formPG.fMagic.value;
if((getNoun) === ""){
alert("You entered a number value, please enter a Noun.");
document.formPG.fNoun.focus();
document.getElementById('iNoun').style.borderColor = "red";
return false;
}
//write story to [document].html
paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>";
paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + ".";
document.write(paragraph);
}
HTML：
<body>
<div class="container">
<h1>Mad Lib</h1>
<form name="formPG" onsubmit="validateForm()" method="post">
Noun: <input type="text" name="fNoun" id="iNoun"><br>
Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br>
Verb: <input type="text" name="fVerb" id="iVerb"><br>
Adverb: <input type="text" name="fAdverb" id="iAdverb"><br>
Adjective: <input type="text" name="fAdjective" id="iAdjective"><br>
Silly Word: <input type="text" name="fSillyWord" id=""iSillyWord"><br>
Magic Spell: <input type="text" name="fMagic" id="iMagic"><br>
<input type="submit" value="submit">
</form>
<br>
<script src="madLib_v2.js"></script>
</div>
</body>
問題是每當我點擊“提交”按鈕時，頁面就會觸及document.getElementById('iNoun').style.borderColor = "red"; 走開 該頁面立即刷新，該框僅在幾分之一秒內突出顯示。 我希望它保持在那里直到頁面基本刷新或直到它們正確。
2 個解決方案
解決方案1
2 已采納 2017-04-15 05:07:19
-
return validateForm()。然后只阻止頁面刷新。 - 刪除元素attributes.like
id=""iSillyWord"-extra quotesandtype="submit "-unwanted space
function validateForm() { var getNoun = document.formPG.fNoun.value; var getVerb = document.formPG.fVerb.value; var getPronoun = document.formPG.fPronoun.value; var getAdverb = document.formPG.fAdverb.value; var getAdjective = document.formPG.fAdjective.value; var getSillyWord = document.formPG.fSillyWord.value; var getMagic = document.formPG.fMagic.value; if ((getNoun) === "") { alert("You entered a number value, please enter a Noun."); document.formPG.fNoun.focus(); document.getElementById('iNoun').style.borderColor = "red"; return false; } //write story to [document].html paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>"; paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + "."; document.write(paragraph); }
<body> <div class="container"> <h1>Mad Lib</h1> <form name="formPG" onsubmit="return validateForm()" method="post"> Noun: <input type="text" name="fNoun" id="iNoun"><br> Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br> Verb: <input type="text" name="fVerb" id="iVerb"><br> Adverb: <input type="text" name="fAdverb" id="iAdverb"><br> Adjective: <input type="text" name="fAdjective" id="iAdjective"><br> Silly Word: <input type="text" name="fSillyWord" id="iSillyWord"> <br> Magic Spell: <input type="text " name="fMagic" id="iMagic"><br> <input type="submit" value="submit"> </form> <br> </div> </body>
解決方案2
1 2017-04-15 05:13:20
在提交表單時阻止默認行為。 一旦有效，使用ajax提交表單
JS
function validateForm(e){
e.preventDefault();
// rest of the code
}
HTML
將事件對象傳遞給函數
onsubmit="validateForm(event)"
jQuery驗證表單，突出顯示無效輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.