javascript text validation not working. alert message doesn't show

Question

I have a simple form validation script:

<script language=”javascript”>
    function return validate_form(register)
 {      
if (""==document.forms.register.FNAME.value){
    alert("This field is required!");
    document.forms.register.FNAME.focus();
    return false;
}    
if (""==document.forms.register.LNAME.value){
    alert("This field is required!");
    document.forms.register.LNAME.focus();
    return false;
}
if (EMAIL.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
    alert(“Wrong email”);
    return false;
}       
if('0'==document.forms.register.GENDER.value){
    alert("You must select an option!");
    document.forms.register.GENDER.focus();
    return false;
}
if (""==document.forms.register.ADDRESS.value){
    alert("This field is required!");
    document.forms.register.ADDRESS.focus();
    return false;
}
if (""==document.forms.register.CONTACTNO.value){
    alert("This field is required!");
    document.forms.register.CONTACTNO.focus();
    return false;
}
}
</script>

the function is called using the onSubmit handler, but nothing happens when submit is clicked. It goes directly to the PHP script instead of javascript 'intercepting' it. Any thoughts?

Form HTML:

 <form name="register" action="register.php" method="POST" onsubmit="return validate_form(register);">
<table width="100%" border="0">
<tr>
  <td width="46%" height="24" align="right">First Name:</td>
  <td width="54%"><input name="FNAME" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Last Name:</td>
  <td><input name="LNAME" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Email Address</td>
  <td><input name="EMAIL" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Gender:</td>
  <td><select name="GENDER">
      <option value="" selected="selected">- Select One -</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option></select></td>
</tr>
<tr>
  <td height="24" align="right">Address:</td>
  <td><input name="ADDRESS" type="text" size"20" /></td>
</tr>
    <tr>
  <td height="24" align="right">Contact No.:</td>
  <td><input name="CONTACTNO" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Password</td>
  <td><input name="PASSWORD" type="password" size"20" /></td>
</tr>
 <tr>
  <td height="24" align="right">Re-type Password</td>
  <td><input name="PASSWORD2" type="password" size"20" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="submit" type="submit" value="Register" /></td>
</tr>
</table>

</form>

the alert message doesn't show? what is wrong??

Answer 1

Well, I refactored your code a bit to make more sense and maintainability

html change:

<form name="register" action="register.php" method="POST" onsubmit="return validate_form();">

Sample JS:

function validate_form() {
    var frm = document.forms.register;
    function focus_and_false(el) {
        el.focus();
        return false;
    }
    if( frm.FNAME.value === "" ) { /* repeat this for all form elements you want to validate */
        alert("This field is required!");
        return focus_and_false(frm.FNAME); /* this is not the best, but i'm showing you how you can reduce overall code by not rewriting the same things. */
    }
    return true;
}​

and here is a sample

Answer 2

You have a HUGE syntax error in your javascript ...

function return validate_form(register)

should be

function validate_form(register)

Maybe you can start with that :)

And add an alert just after the function starts so you know that when you call it, it actually executes or at least tries to.

Another syntax error:

<script language=”javascript”>

Should be

<script type="text/javascript">

And finally i would change the function name to

function validateForm(register)

Let me know if it works :)

Answer 3

You got curly quotes in your code

alert(“Wrong email”);  <---bad quotes

You should not just use a name

onsubmit="return validate_form(register);"

pass in this which points to the current scope which is the form element.

onsubmit="return validate_form(this);"

What is EMAIL?

EMAIL.value

Do not just reference element names.