Validation script

kiefersmokerlan · 01-25-2013, 12:19 AM

Hello everyone,

So I am practicing on my HTML5/JavaScript skills, but I am a bit stumped and would like some input. I am using a JavaScript that I wrote and used in the past, that makes sure that all the text boxes are filled before proceeding to the next page. The validating works fine, but there is one error, which I have never encountered before. I notice that when the text boxes are empty, an alert box appears notifying the user to fill out all the required fields, but it continues to the next page, instead of allowing the user to correct the problem, then continue accordingly. Here is my code:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function validate(){
	var valid = true;
	if (document.regpage.usrNm.value==""||document.regpage.passWrd.value==""||document.regpage.cnfrmPsswrd.value==""||document.regpage.state.value==""||document.regpage.zip.value=="")
	    valid = false;
	if (valid == false)
		alert("You must fill out ALL required fields!");
	else
		document.regpage.submit();}
</script>

<link rel="stylesheet" type="text/css" href="mainpage.css" />
</head>

<body>

<div class="logIn">
<form name="regpage" action="reg.php" method="post">
<p>Easy sign-up! Please fill out all the required fields to get started!
</p>
User Name<font color="red">*</font>:
<input type="text" name="usrNm" value="" /><br />
Password<font color="red">*</font>:
<input type="text" name="passWrd" value="" /><br />
Confirm Password<font color="red">*</font>:
<input type="text" name="cnfrmPsswrd" value="" /><br />
State<font color="red">*</font>:
<input type="text" name="state" value="" /><br />
Zip Code<font color="red">*</font>:
<input type="text" name="zip" value="" /><br />
<input type="submit" value="Register" onclick="validate()" />
</form>
</div>

</body>
</html>

Any help would be appreciated. As many of you experienced programmers may notice; I am somewhat new to web development and programming.

Old Pedant · 01-25-2013, 01:20 AM

The quick and dirty way:

Change <input type="submit"> to <input type="button">.

So long as it is a submit button, then it will submit the <form>!

***********

Better way. Get rid of the onclick on the submit button completely.

Change the <form> to:

<form name="regpage" action="reg.php" method="post" onsubmit="return validate(this);">

Change your JS to:

Code:

function validate(form)
{
    if (    form.usrNm.value==""
         || form.passWrd.value==""
         || form.cnfrmPsswrd.value==""
         || forme.state.value==""
         || form.zip.value ==""
    ) {
        alert("You must fill out ALL required fields!");
        return false;
    }
    return true;
}

But having said all the above...

WHy bother? That validation is essentially useless.

If the user enters a SINGLE SPACE (or any other character...or any other completely illogical value) for each field, it will pass validation.

If you are going to validate, then *REALLY* validate. Don't both with virtually useless code.

There are literally HUNDREDS (if not thousands) of posts in this very forum relating to form validation. Go look around and find some *good* validation.

p.s.: And I hope you are *ALSO* validating the <form> on your PHP page! Obviously form validation in JavaScript is useless if somebody turns off JavaScript. Or if a hacker hits your site without even using your code.

kiefersmokerlan · 01-25-2013, 02:42 AM

Thank you for you help. Being new to JavaScript I can use all the advice and knowledge that I can use. I will definitely go through different posts on this forum to learn more.

I was going to use the reg.php to connect to a database I created, and transfer the information from the text boxes in the reg.html file, to the database. I suppose that you're suggesting to write a validation script on the reg.php page as well to make more secure to attacks and an actual effective validation.

Old Pedant · 01-25-2013, 03:09 AM

Quote:

Originally Posted by kiefersmokerlan

I was going to use the reg.php to connect to a database I created, and transfer the information from the text boxes in the reg.html file, to the database. I suppose that you're suggesting to write a validation script on the reg.php page as well to make more secure to attacks and an actual effective validation.

** EXACTLY! **

It's really very important. Trust me, SOMEDAY you will be hit by hackers who will simply look at your <form> code and start submitting usernames and passwords as fast as they can "spoofing" your site. They won't even use your actual <form>, much less your JS code.

felgall · 01-25-2013, 04:54 AM

Also get rid of the alert and update the error message in the page itself instead - most browsers now either allow alerts to be turned off or even provide an option in the alert to turn off JavaScript.