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 :)
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>
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:
onsubmit
callback #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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.