JavaScript表單驗證框突出

的JavaScript：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";和消失。該頁面立即刷新，該框僅突出顯示幾分之一秒。我希望它留在那裏，直到頁面基本刷新或直到它們正確。

來源

2017-04-15 Chris Herzog

您在_Silly Word_行中有錯字，'id =「」iSillyWord「'有一個額外的引號。 – IiroP

謝謝！但是這並沒有解決它haha –

onSubmit =「return validateForm（）」 –

用return validateForm()做什麼。然後只有它阻止頁面刷新。
attributes.like id=""iSillyWord"-extra quotes和type="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>

來源

2017-04-15 05:07:19 prasanth

防止因爲形式是越來越提交的默認行爲，刪除的元素不需要的空間和報價。一旦有效使用Ajax提交表單

function validateForm(e){ 
    e.preventDefault(); 
// rest of the code 
}

HTML

傳遞事件對象的功能

onsubmit="validateForm(event)"

DEMO

來源

2017-04-15 05:13:20 brk

JavaScript表單驗證框突出

回答

相關問題