Home/ Questions/Q 7044597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:25:43+00:00

In the following code I am trying to get the select box to display

  • 0

In the following code I am trying to get the select box to display a message beside the box if it hasn’t selected a value of male or female. and not show it if it has one of these values selected. but it isnt working, it works fine with the text boses for email and password can anyone see why this isnt working and help me with the answer. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0045)https://vle.wit.ie/file.php/8220/lab5pt2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

function validate_gender(field,alerttxt)
{

with (field){
apos=value.indexOf("0");

if (apos>0)
{
document.getElementById('gender_help').innerHTML="";
return true;
}else{

document.getElementById('gender_help').innerHTML=alerttxt; 
return false;

}


}

}
function validate_email(field,alerttxt)
{
with (field)
  {
  apos=value.indexOf("@");
  dotpos=value.lastIndexOf(".");
  if (apos<1||dotpos-apos<2)
    {document.getElementById('email_help').innerHTML=alerttxt;return false; }
  else {document.getElementById('email_help').innerHTML="";return true;}
  }
}

function validate_password(field, alerttxt){

with (field){
var re = /^[a-zA-Z0-9]{6,8}$/;

if (re.test(value))
{
document.getElementById('pass_help').innerHTML="";
return true;
}else{

document.getElementById('pass_help').innerHTML=alerttxt; 
return false;

}


}

}


function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
   if (!validate_gender(gender,"A Valid gender is Required"))
  {gender.focus();return false;}
  if (!validate_email(email,"A Valid Email is Required"))
  {email.focus();return false;}
  if (!validate_password(pass,"Password must be between 6 and 8 characters and contain both numbers and alphas"))
  {pass.focus();return false;}
  }
}
</script>
</head>

<body>
<form action="" onsubmit="return validate_form(this)" method="post">
What is your gender?<br /> 
<select name="gender" ><span id="gender_help"></span>
                                <option value="0" selected="selected">Select...</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select><br/>

Email: <input type="text" name="email" size="30" ><span id="email_help"></span><br>
Password <input type="password" name="pass" size="30"><span id="pass_help"></span><br>

<input type="submit" value="Submit">
</form>

</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a shocking display of anti-patterns!!

    1. Don’t use with.
    2. Cache your selectors i.e. var emailHelper = document.getElementById('email_help')
    3. Don’t use inline javascript i.e onClick=''
    4. Consider using a library like jQuery to handle events in a cross-browser way.
    5. Generally it’s not good to put braces on a new line.
    6. You shouldn’t have a <span> inside of the <select> element.

    Check out http://javascript.crockford.com/ or http://eloquentjavascript.net/ for some other tips and tricks and best practices. Also more about why not to use with here: Are there legitimate uses for JavaScript's "with" statement?

    Now on to the actual question!

    You’re having trouble with the select box. Let’s try something like this:

    var genderHelper = document.getElementById('gender_help')

function validate_form(thisform) {
    // your other stuff
   if (!validate_gender(thisform.gender.value,"A Valid gender is Required")) {
       thisform.gender.focus();
       return false;
   }
}

function validate_gender(gender, error) {
  var validGender = (gender === "M" || gender === "F")
  if (!validGender) {
      genderHelper.innerHTML = error
  }
  return validGender
}

    Update

    After playing with it for while in jsFiddle I’ve found the problem appears to be that your <span> tag is nested within the <select> tag, which is why you can’t see it.

    Here’s a working version mostly using your code:

    http://jsfiddle.net/6buUJ/1/

    • 0