Jump to content

Validation - Select Option


twilitegxa

Recommended Posts

I'm having some trouble with my validation script. I'm still pretty new to validation and JavaScript, so please bare with me. I have a simple form:

 

<form method="post" action="create.php"name="create" onSubmit="return checkForm();">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name"/></td>
<td><div class=error id=nameError>* Please enter a character name.</div></td>
</tr>
<tr>
<td>Class:</td>
<td>
<select name="class" id="class">
<option id="choose" value="choose" selected="selected">Choose Class</option>
<option id="fighter" value="fighter">Fighter</option>
<option id="cleric" value="cleric">Cleric</option>
<option id="mage" value="mage">Mage</option>
<option id="sorcerer" value="sorcerer">Sorcerer</option>
<option id="barbarian" value="barbarian">Barbarian</option>
<option id="priest" value="priest">Priest</option>
</select>
</td>
<div class=error id=classError>* Please choose a character class.</div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Create Character" id="submit" />
<input type="reset" value="Reset" id="reset" />
</td>
</tr>
</table>
</form>

 

And my textbox validation works, but I can't get my select option list to validate:

 

function checkForm() {

name = document.getElementById("name").value;
if (name == "") { document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
return false;
}
//return true;
//}

if (class.selectedIndex == 0) {
document.getElementById("classError").style.display = "inline";
return false;
}
return true;
}

 

What am I doing wrong? Can anyone help?

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/208473-validation-select-option/
Share on other sites

I changed the section for the select list to this:

 

class = document.getElementById("class").value;
if (class == "0") {
document.getElementById("classError").style.display = "inline";
document.getElementById("class").select();
document.getElementById("class").focus();
return false;
}

 

and it does in fact display the error, although it still submits. Can anyone help?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.