Html and javascript box authentication

Question

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>

Welcome to Stack Overflow! "It doesn't work" is *never* a good error description. Please describe what goes wrong, what error messages you get, etc. — Pekka, Jan 11 '12 at 16:40
it displays nothing beside the gender select box if male or female isnt selected while it should display this message if submit is clicked without entering male or female (A Valid gender is Required). — AlanF, Jan 11 '12 at 16:47

score 2 · Accepted Answer · edited May 23 '17 at 12:03

This is a shocking display of anti-patterns!!

Don't use with.
Cache your selectors i.e. var emailHelper = document.getElementById('email_help')
Don't use inline javascript i.e onClick=''
Consider using a library like jQuery to handle events in a cross-browser way.
Generally it's not good to put braces on a new line.
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/

score 0 · Answer 2 · answered Jan 11 '12 at 16:49

0

You can not display text in a select area that is not an option or a optgroup. I think it better to :

add a span with 'A Valid gender is Required' close to select area and display it, when gender is not select.
or border in red the select area if gender mising.

answered Jan 11 '12 at 16:49

JuSchz

1,200
2
15
30

i know you cant insert the text inside the box, i want it to appear outside the box if nothing has been selected – AlanF Jan 11 '12 at 16:52
Ok. So move your outside the box. – JuSchz Jan 11 '12 at 16:55

Vishnu Haridas · Answer 3 · 2012-01-11T17:01:27.203

0

"0".indexOf("0") is 0

"M".indexOf("0") is -1

"F".indexof("0") is -1

You could check if (value != '0') { return true; }

edited Jan 11 '12 at 17:01

answered Jan 11 '12 at 16:52

Vishnu Haridas

7,355
3
28
43

score 0 · Answer 4 · answered Jan 11 '12 at 16:55

You can't nest a span inside a select element.

You could however update one of the select elements to have the text you want the user to see.

Probably just having the span next to the select is the best though.

This is not valid html:

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

Html and javascript box authentication

4 Answers4