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
– Pekka, Commented Jan 11, 2012 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
– AlanF, Commented Jan 11, 2012 at 16:47

Community · Accepted Answer · 2017-05-23 12:03:14Z

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/

JuSchz · Accepted Answer · 2012-01-11 16:49:08Z

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, 2012 at 16:49

JuSchz

1,2082 gold badges15 silver badges30 bronze badges

2 Comments

AlanF Over a year ago

i know you cant insert the text inside the box, i want it to appear outside the box if nothing has been selected

JuSchz Over a year ago

Ok. So move your <span id="gender_help"></span> outside the box.

mtyson · Accepted Answer · 2012-01-11 16:55:20Z

0

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>

answered Jan 11, 2012 at 16:55

mtyson

8,68218 gold badges78 silver badges115 bronze badges

Comments

Vishnu Haridas · Accepted Answer · 2012-01-11 17:01:27Z

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, 2012 at 17:01

answered Jan 11, 2012 at 16:52

Vishnu Haridas

7,5473 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Html and javascript box authentication

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related