CODEWITHSUNDEEP
javascriptjqueryhtml
Chris Herzog
Chris Herzog

Reputation: 29

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>

The problem is whenever I hit the "submit" button the page hits the document.getElementById('iNoun').style.borderColor = "red"; and goes away. The page refreshes instantly and the box is only highlighted for a fraction of a second. I want it to stay there until the page is refreshed basically or until they get it correct.

Upvotes: 1

Views: 64

Answers (2)

brk
brk

Reputation: 50291

prevent the default behavior as the form is getting submitted. Once it is valid use ajax to submit the form

JS

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

HTML

pass the event object to the function

onsubmit="validateForm(event)"

DEMO

Upvotes: 1

prasanth
prasanth

Reputation: 22500

  1. Do with return validateForm() .Then only its prevent page refresh .
  2. Remove the unwanted space and quotes in elements attributes.like id=""iSillyWord"-extra quotes and 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>

Upvotes: 2

Related Questions