Why is my input not validating?

Question

1.00/5 (1 vote)

See more:

Hi!, Very new to html.
I have been searching for solutions for hoursssss.
I have this problem.

I want to accept only certain user inputs .
in this case, keeperrank shall only be "Senior", "Junior" , "Standard"
if it is , anything else, it will not accept it.

But it keeps accepting other inputs such as "D".
Did i do something wrong in the script?

This is also taking action from a jsp file.
since i connected this to a database from mysql.

or am i supposed to write the code in jsp file?

What I have tried:

Heres my code so far,

<html>
<head>
<title>Course Master</title>
<script>
var keeperrank = document.getElementById("keeperrank");


if (keeperrank.value == '' || keeperrank.value != "Senior" || keeperrank.value != "Junior" || keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}
else return true;




</script>
</head>

<body>
	<form action="course_action.jsp">
		Keeper ID : <input type="text" name="keeperID" required><br><br>
		Keeper name : <input type="text" name="keepername"><br><br>
	Keeper rank: <input type="text" name="keeperrank" required><br><br>
		Date of Birth : <input type="text" name="dateofbirth"><br><br>
	
		<button type="submit">Save</button> 
		<button type="refresh">Clear</button>
	</form>
</body>
</html>

Posted 7-Dec-21 18:44pm

Bonzowo

Updated 7-Dec-21 23:54pm

Add a Solution

2 solutions

Solution 1

The three expressions need to be connected with the and (&&) operator, not or (||).
That is the tests are

IF the value is blank OR
    the value is not equal to "Senior" AND not equal to "Junior" AND not equal to "Standard"
THEN
    post the error message.

ELSE
    it must be non-blank and equal to one of those words.

JavaScript

if (keeperrank.value == '' || (keeperrank.value != "Senior" && keeperrank.value != "Junior" && keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}

Posted 7-Dec-21 22:38pm

Richard MacCutchan

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-12-07T23:54:00

Quote:

HTML

<script>
var keeperrank = document.getElementById("keeperrank");


if (keeperrank.value == '' || keeperrank.value != "Senior" || keeperrank.value != "Junior" || keeperrank.value != "Standard"){
messages.push("Please Enter Valid Ranks Only")
return false;
}
else return true;
</script>

Your script runs once, when the page first loads. At that point, the user hasn't had a chance to type anything in yet. Your return statements don't do anything, since there's no function to return from. And you'll get a script error, since you haven't defined the messages variable anywhere.

You also haven't added an ID to your keeperrank field, so document.getElementById("keeperrank") will return null, giving you more script errors.

You need to add the ID attribute to the keeperrank element, and run your script in response to the form being submitted:

JavaScript

document.addEventListener("submit", function(e) {
    if (e.target.tagName.toUpperCase() !== "FORM") { return; }
    
    const rank = document.getElementById("keeperrank").value;
    if (rank === "") {
        alert("Please enter a rank");
        e.preventDefault();
        return;
    }
    
    if (rank !== "Senior" && rank !== "Junior" && rank !== "Standard") {
        alert("Please enter a valid rank");
        e.preventDefault();
        return;
    }
});

If you want to force the correct value, you could use a <select> instead of an <input>, avoiding the need to use script at all:

HTML

<p>Keeper rank: <select name="keeperrank" required>
    <option>(Select one)</option>
    <option value="Senior">Senior</option>
    <option value="Junior">Junior</option>
    <option value="Standard">Standard</option>
</select></p>

<select>: The HTML Select element - HTML: HyperText Markup Language | MDN[^]