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

Also, just so you are aware, this code is very old fashioned. There are much less painful ways to do this. Using CSS instead of table would help ease the pain of development for you. Also, you have a bunch of Yoda conditions. Developers generally prefer them to be something like if(variableName == "someValue") rather than if("someValue" == variableName) — thatidiotguy
– thatidiotguy, Commented Aug 31, 2012 at 17:41
PLEASE remove the arguments here - dot notation will pick up the form name. you do not need to pass around this argument ever. it might actually screw with your script. — rlemon
– rlemon, Commented Aug 31, 2012 at 17:43

rlemon · Accepted Answer · 2012-08-31 17:50:23Z

4

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

answered Aug 31, 2012 at 17:50

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rlemon Over a year ago

then the issues are other places, my fiddle works. Try to reproduce the error in jsFiddle and I might be able to help further.

user1460013 Over a year ago

yes. i tried your fiddle it did work. there aren't any error message just that the alert still won't show. :\ thank you for you're help. i'll be trying to re code and use you're code.

rlemon Over a year ago

I think the main issues were your yoda conditions ?? and that you were mucking around with the variable register when it was already being used in the dot notation...

Naftali · Accepted Answer · 2012-08-31 17:57:04Z

1

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

edited Aug 31, 2012 at 17:57

Naftali

147k41 gold badges247 silver badges304 bronze badges

answered Aug 31, 2012 at 17:40

fonZ

2,4774 gold badges23 silver badges40 bronze badges

9 Comments

user1460013 Over a year ago

thank for mentioning. i already changed it but the alert message is still not showing. i'm still new in using javascript so i thought this code was the simplest. but can't seem to make it work?

rlemon Over a year ago

what does renaming the function to use camelCase vs underscore have to do with anything ?

fonZ Over a year ago

There are naming conventions. And i believe javascript follows the same naming conventions as Java does. So to make your code readable for others you better follow them. But as i said "i would", its a suggestions.

rlemon Over a year ago

but this has... nothing to do with anything... and at best is a personal opinion not a standard naming convention

fonZ Over a year ago

Did you ever hear about code conventions? javascript.crockford.com/code.html oracle.com/technetwork/java/codeconv-138413.html This is not my opinion ... Those are best practices. Imagine if there were no conventions how code would look like ... Professionals follow these guidelines.

|

epascarello · Accepted Answer · 2012-08-31 18:02:34Z

0

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.

edited Aug 31, 2012 at 18:02

answered Aug 31, 2012 at 17:43

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

user1460013 Over a year ago

sorry. i got it fixed. yet the alert message is still not working

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related