Validate input in a text field with javascript (needs to be one of two values)

Question

long time reader, first time poster. I'm relatively new to Javascript, but I've been tinkering with HTML, PHP and SQL for a while now. Anyways, long story short my instructor at college gave us an assignment for some pseudocode, and I decided to see if I could make it into a working form with Javascript. I've already submitted my assignment, don't worry, you aren't helping me cheat. I just want to see if this can be done in Javascript, as impractical as it might be:

There's 3 classic movies on sale this week: 1. Star Wars 2. E.T. 3. Raiders of the Lost Ark.

The user has to enter the number of the movie they want to see. If the value entered is <1 or >3, the page should return an error.

The user has the option to stream or download the movie, and needs to enter in a textbox S for streaming or D for downloading.

So far, what I need help with is validating the input from the streaming/downloading textbox. This is what I have for my code so far:

<p id="welcome">Welcome to MovieStream! Would you like to Stream or Download   
your movies? Type S for stream, D for download</p>
<form>
<input type="text" id="purchaseType">
<input type="submit" action="validateForm()">
</form>
<script type="text/javascript">
function validateForm() {

if (document.getElementById("purchaseType").value != S || D) {
    alert("Please type S to stream the movie, or D to download");
}
}
</script>

So far this is as far as I've gotten. When I click submit, nothing happens (I've even tried

document.getElementById("welcome").innerHTML += "Please type S to stream the movie, or D to Download");

but it still doesn't work. I think it's something with the ".value != S || D" area but I can't seem to find any information anywhere. Is this operation even possible in Javascript alone? I really hope this makes sense, and someone will hopefully have an answer for me. Thanks :)

Answer 1

You can set a pattern attribute to the input element like this:

  <input type="text" id="purchaseType" pattern="S|D" required>

Then, if you want to customize the error message, check the validity property when an input event is raised on it:

purchaseType.addEventListener( "input", function ( event ) 
{
  if ( purchaseType.validity.patternMismatch ) 
    purchaseType.setCustomValidity( "Please type S to stream the movie, or D to download" ) 
  else 
    purchaseType.setCustomValidity( "" )
} )

Finally, add CCS rules with pseudo-element :invalid that will give a visual feedback, for example:

#purchaseType:invalid {
  color: red ;
  border: 1px solid  red ;
  box-shadow: 0 0 10px 0 red  ;
  }

#purchaseType:valid {
  color: limegreen ;
  border: 1px solid limegreen ;
  }

Reference: MDN Data Form Validation

purchaseType.addEventListener( "input", function ( event ) 
{
  if ( purchaseType.validity.patternMismatch ) 
    purchaseType.setCustomValidity( "Please type S to stream the movie, or D to download" ) 
  else 
    purchaseType.setCustomValidity( "" )
} )

#purchaseType:invalid {
  color: red ;
  border: 1px solid red ;
  box-shadow: 0 0 10px 0 red  ;

  }

#purchaseType:valid {
  color: limegreen ;
  border: 1px solid limegreen ;
  box-shadow:  0 0 5px 0 limegreen;
  }


#purchaseType:focus {
  outline: none ;
}

<p id="welcome">Welcome to MovieStream! Would you like to Stream or Download   
your movies? Type S for stream, D for download</p>
<form>
  <input type="text" id="purchaseType" pattern="S|D" required placeholder="Type S or D" autofocus>
  <input type="submit">
</form>

Answer 2

You need to compare the input with wished values as strings:

if (document.getElementById("purchaseType").value != 'S' && document.getElementById("purchaseType").value != 'D') {

(the single quotes)

UPDATE:

Here are the parts you need to change:

• to prevent sending the form to the server you need the onsubmit callback
• replace the #error contents instead of appending the (same) error message after each click

function validateForm() {

    if (document.getElementById("purchaseType").value != 'S' && document.getElementById("purchaseType").value != 'D') {
        document.getElementById("error").innerHTML = "Please type S to stream the movie, or D to download";

        return false;
    }

    return true;
}

<form onsubmit="return validateForm()">
    <input type="text" id="purchaseType">
    <input type="submit">
</form>

<p id="error"></p>