使用javascript验证文本字段中的输入（需要为两个值之一）

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. ET 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>