[weldo]

anyone know if its possible to have placeholder text in a form and some js validation at the same time ??

i've been trying to find something, but can't find anything that uses/allows both .. ?

seems like its one or the other ??? anyone know any different (or better) ??


ta

[weldo]

so, nobody got anything for me then ??
does including placeholder text mean that most js validation scripts are rendered useless ??

anyone ??

please ?

[MikeMackay]

Yes you can have placeholder text and do validation with JS at the same time although you would need to customise your validation routine to work with your placeholder text.

What JS code have you got so far ? What is your placeholder text going to be ?

If you show us your code then we might be able to check it out for you.

- Mike

[weldo]

true .... but my code is at home ... i'll try and post it later ...

[MikeMackay]

Ok dude, post it up when you get home and I'll have a look it for you. I can't make any promises that I will get it working exactly as you want, but I'll definately give it the once over

- Mike

[weldo]

much obliged, squire.

[weldo]

my js (from dynamic drive)

<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("txt_housevalue","txt_mortgagebalance");
// Enter field description to appear in the dialog box
var fieldDescription = Array("House Value", "Mortgage Balance");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}

if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>


my form :
<form name="enquiry_form" enctype="form-data" action="lemon_mail.php" method="post" onsubmit="return formCheck(this);">
<input type="hidden" name="subject" value="Lemon Loans UK - Web Application" />
<input type="hidden" name="require" value="txt_housevalue,txt_mortgagebalance" />
<input type="hidden" name="redirect" value="http://www.lemonloansuk.com/thanks.htm" />
<input type="hidden" name="missing_fields_redirect" value="http://www.lemonloansuk.com/error.htm" />

a typical field :
<label for="txt_name">Your Name :</label><input type="text" id="txt_name" name="txt_name" class="pic" value="Your Name" onfocus="this.value=''" />


any use to you ???

thanks in advance fella...

[MikeMackay]

Ok, I've managed to alter the JavaScript to allow default form values:

<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("txt_housevalue","txt_mortgagebalance");

// Enter field description to appear in the dialog box
var fieldDescription = Array("House Value","Mortgage Balance");

// Enter default form values (Must match the same order as fieldRequired)
var defaultValues = Array("Enter Value","Enter Balance");

// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];
	if (obj){
		switch(obj.type){
		case "select-one":
		if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
			alertMsg += " - " + fieldDescription[i] + "\n";
		}
		break;
		case "select-multiple":
		if (obj.selectedIndex == -1){
			alertMsg += " - " + fieldDescription[i] + "\n";
		}
		break;
		case "text":
		case "textarea":
		if (obj.value == "" || obj.value == null || obj.value == defaultValues[i]){
			alertMsg += " - " + fieldDescription[i] + "\n";
		}
		break;
		default:
	}
	if (obj.type == undefined){
		var blnchecked = false;
		for (var j = 0; j < obj.length; j++){
			if (obj[j].checked){
				blnchecked = true;
			}
		}
		if (!blnchecked){
			alertMsg += " - " + fieldDescription[i] + "\n";
		}
	}
}
}

if (alertMsg.length == l_Msg){
	return true;
} else {
	alert(alertMsg);
	return false;
}
}
// -->
</script>

and the corresponding HTML form code to go with it (which I used for testing):

<form name="enquiry_form" enctype="form-data" action="lemon_mail.php" method="post" onsubmit="return formCheck(this);">
<input type="hidden" name="subject" value="Lemon Loans UK - Web Application" />
<input type="hidden" name="redirect" value="http://www.lemonloansuk.com/thanks.htm" />
<input type="hidden" name="missing_fields_redirect" value="http://www.lemonloansuk.com/error.htm" />
<label for="txt_housevalue">House Value:</label> <input type="text" id="txt_housevalue" name="txt_housevalue" class="pic" value="Enter Value" onfocus="this.value=''" /><br />
<label for="txt_mortgagebalance">Mortgage Balance:</label> <input type="text" id="txt_mortgagebalance" name="txt_mortgagebalance" class="pic" value="Enter Balance" onfocus="this.value=''" /><br />
<input type="submit" value="Submit Form">
</form>

Basically, the updated script only checks the default values for Text & Textarea Inputs. I simply added a new array for defaultValues which corresponds to the same order/sequence as the requiredFields array. When the validation is in process, it checks the new input is not blank or the same as the default field value.

All new additions or changes are highlighted in red. I also removed the "require" hidden input from your form as it doesn't appear to be used anywhere as you are already creating the array directly inside the JavaScript code.

Just make sure that your HTML form field values match (this is case sensitive) the values in the defaultValues array exactly, otherwise that specific part of the validation will fail.

I have only tested this in my FF browser, but the code looks fairly generic and support should work across the board.

If you get stuck or need further help, then just shout.

- Mike

[weldo]

much appreciated Mike.

I'll give it a go later this week ... If it works (i have faith) then I'll get you a virtual bevvie !!

Cheers