Error Control in HTML

L

Lord-Nikon

Expert Member
Joined
Jul 22, 2008
Messages
2,511
Reaction score
0
I need some tips and/or advise.

I have a form with a couple of fields about items and prices that the user needs to add. Basically what I need to check is that the data entered in certain fields are numbers only. This is easy using PHP but I need to check this before the form data is posted to my PHP script.

Is there a way that HTML and JAVA can do this for me? If I hit submit, do the check, have a little block popping up and telling me what fields are wrong and then allowing me to correct the fields and try again. If all fields are correct, move on to my PHP script...

Thanks in advance...
 
A javascript hook on the submission can do this for you.

This site will give you a rundown of the basics:
http://www.w3schools.com/jS/js_form_validation.asp

You might consider using a javascript library for more complex situations:
http://docs.jquery.com/Plugins/Validation

Just remember that you absolutely cannot trust that the javascript validation has resulted in valid data being passed into your PHP script. It is a mere client-side convenience.
 
I think you rather need javaSCRIPT for that, not JAVA.

You could write yourself a little validation script that validates all fields before submitting the form. Here is a sample of a script that validates 2 fields to ensure that they aren't blank before submitting the form:



Code: 
<script language="javascript" type="text/javascript">

function ValidateData()
{
  var field1 = document.getElementById("field1Id");
  var field2 = document.getElementById("field2Id");
  var form = document.getElementById("theFormsId");

  if (ValidateField(field1) && ValidateField(field2))
    form.submit();
  else
    alert("Errors were encountered while validating the fields. Please correct all highlighted fields before trying again");
}

function ValidateField(fieldToValidate)
{
  if (fieldToValidate.value.length == 0)
  {
    fieldToValidate.style.backgroundColor = "pink";
    fieldToValidate.title = "Please supply correct value.";
  }
  else
  {
    fieldToValidate.style.backgroundColor = "white";
    fieldToValidate.title = "";
  }
  return fieldToValidate.value.length > 0;
}

</script>

Finally, you need to add an onclick event handler to your button that submits the form, something like:

<input type="submit" onclick="ValidateData();" value="Submit" />

Before the Web Standards Nazis come and rip my simple code apart, note that this is just to illustrate the idea. There are better (but more complicated) ways of achieving the same result, but this just is just a sample to get you going.
 
icyrus said:
Just remember that you absolutely cannot trust that the javascript validation has resulted in valid data being passed into your PHP script. It is a mere client-side convenience.
Click to expand...

Looks like you beat me to the answer. I must remember to type faster next time! ;)

Good point as well. For the client-side validation to work, the users need to have JavaScript enabled in their browsers...
 
icyrus said:
A javascript hook on the submission can do this for you.

This site will give you a rundown of the basics:
http://www.w3schools.com/jS/js_form_validation.asp

You might consider using a javascript library for more complex situations:
http://docs.jquery.com/Plugins/Validation

Just remember that you absolutely cannot trust that the javascript validation has resulted in valid data being passed into your PHP script. It is a mere client-side convenience.
Click to expand...

Thanks for the links! Will have a look into them at the moment and keep you guys posted on my progress...
 
FarligOpptreden said:
I think you rather need javaSCRIPT for that, not JAVA.

You could write yourself a little validation script that validates all fields before submitting the form. Here is a sample of a script that validates 2 fields to ensure that they aren't blank before submitting the form:



Code: 
<script language="javascript" type="text/javascript">

function ValidateData()
{
  var field1 = document.getElementById("field1Id");
  var field2 = document.getElementById("field2Id");
  var form = document.getElementById("theFormsId");

  if (ValidateField(field1) && ValidateField(field2))
    form.submit();
  else
    alert("Errors were encountered while validating the fields. Please correct all highlighted fields before trying again");
}

function ValidateField(fieldToValidate)
{
  if (fieldToValidate.value.length == 0)
  {
    fieldToValidate.style.backgroundColor = "pink";
    fieldToValidate.title = "Please supply correct value.";
  }
  else
  {
    fieldToValidate.style.backgroundColor = "white";
    fieldToValidate.title = "";
  }
  return fieldToValidate.value.length > 0;
}

</script>

Finally, you need to add an onclick event handler to your button that submits the form, something like:

<input type="submit" onclick="ValidateData();" value="Submit" />

Before the Web Standards Nazis come and rip my simple code apart, note that this is just to illustrate the idea. There are better (but more complicated) ways of achieving the same result, but this just is just a sample to get you going.
Click to expand...

I meant JavaScript, soz for typo :D

Also thanks for the example. I've had a quick read through your code and get the idea. It makes sense. Will quickly pop it into my code and let you know if I managed to get the correct results...
 
Lord-Nikon said:
I meant JavaScript, soz for typo :D

Also thanks for the example. I've had a quick read through your code and get the idea. It makes sense. Will quickly pop it into my code and let you know if I managed to get the correct results...
Click to expand...

Pleasure! Hope it helps you out...
 
Again, thank you all for your help!

In the end I manged by using :

Code: 
<script type="text/javascript">
<!--
function validate_form ( )
{
	valid = true;
        if ( isNaN(document.rfq_items.qty.value))
        {
                alert ( "Please use only numbers for 'Estimate Monthly Volume'." );
				document.rfq_items.qty.style.backgroundColor = "pink";
				document.rfq_items.qty.focus();				
                valid = false;
        } 
		if ( isNaN(document.rfq_items.delivery_cost.value))
        {
                alert ( "Please use only numbers for 'Delivery'." );
				document.rfq_items.delivery_cost.style.backgroundColor = "pink";
				document.rfq_items.delivery_cost.focus();
                valid = false;
        } 
		if ( isNaN(document.rfq_items.tooling_cost.value))
        {
                alert ( "Please use only numbers for 'Tooling Cost'." );
				document.rfq_items.tooling_cost.style.backgroundColor = "pink";
				document.rfq_items.tooling_cost.focus();
                valid = false;
        } 
		if ( isNaN(document.rfq_items.ctsell_price.value))
        {
                alert ( "Please use only numbers for 'Competitor Sell Price'." );
				document.rfq_items.ctsell_price.style.backgroundColor = "pink";
				document.rfq_items.ctsell_price.focus();
                valid = false;
        } 
        return valid;
}
//-->
</script>

And for the form :

Code: 
<form name="rfq_items" action="write_rfq_items.php" method="POST" enctype="multipart/form-data" onsubmit="return validate_form();">

This seems to have solved my problem. Also, thanks to FarligOpptreden, I've stolen your idea for the Pink backgrounds of the error fields. Hope you don't mind...
 
Lord-Nikon said:
This seems to have solved my problem. Also, thanks to FarligOpptreden, I've stolen your idea for the Pink backgrounds of the error fields. Hope you don't mind...
Click to expand...

No problem! A better option would've been to create CSS classes for something like:

Code: 
error
{
  background-color:Pink;
}

no_error
{
  background-color:white;
}

...and then instead of stating:

Code: 
control.style.backgroundColor = "pink";

...use:

Code: 
control.className = "error";

Doing it this way gives you maximum flexibility in changing the colors later on, without having to run through all your scripts and change "pink" to "orange", for example.

Another thing, rather use:

Code: 
document.getElementById("qty").value

...instead of:

Code: 
document.rfq_items.qty.value

EDIT:

For a more elegant solution, alter the "title" attribute of each element that gives an error. The "title" attribute sets the tooltip for the element. If errors were encountered (i.e. if(!valid) ) then only throw one alert() to notify the user of errors. Otherwise the user will get a bunch of successive alerts if multiple errors were encountered. That always kinda irritates me on a website... So you might try something like the following:

Code: 
var elmQty = document.getElementById("qty");
if (isNaN(elmQty.value))
{
   elmQty.title = "Please use only numbers for 'Estimate Monthly Volume'." 
   elmQty.className = "error";
   elmQty.focus();				
   valid = false;
}
else
{
   elmQty.title = "";
   elmQty.className = "no_error";
}

Finally, before the end of your function, throw just one alert as follows:

Code: 
if (!valid) alert("Errors were encountered while validating the data on this form. Please hover over the highlighted fields for further details.");
 
Last edited:
Oh WOW! Tx a mil for that! Busy incorporating that into my scripts...

I'm a bit new to JavaScript so this is helping me tremendously!
 
Raithlin said:
Do yourself a favour, and check out jQuery (jquery.com). It simplifies a lot of what you are trying to do - and makes it cross-browser compatible at the same time.

BTW, I found this server-side article about filtering input in PHP. Might help you, seeing as you need to check input there too. ;)
http://nettuts.com/tutorials/php/sanitize-and-validate-data-with-php-filters/
Click to expand...

TX for the suggestions! I'm already filtering my data on the PHP side. PHP I'm quite familiar with and don't have any difficulties on that side... The Database side of the program and the functionality is quite robust and sorted for from my side. It's just the front end I'm not good at :( The HTML and the JavaScript parts :D But, alas! Every day a new lesson!
 
Glad I could help. And yes, check out jQuery as well. Valuable source of JavaScript libraries.

BUT also teach yourself some core JavaScript by playing around with the sample I gave you. There's not substitute for knowing the language inside-out.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X