Forums

I am using the javascript below to display some default text. The only issue with this is if the user just clicks submit, without entering text, it submits the default text. I was wondering if someone can help me code it to check if the user entered some text other than the default. I searched the internet but couldn't find one with that option. Thanks in advance.

<INPUT type="text" size="30" name="Accept_Agreement" value="Enter your name here" onFocus="if(this.value == 'Enter your name here') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Enter your name here';}" />

Hi,

you need to make a function called "validate"()" for example, and add it in the JS code box and add the same code you have for validation onfocus and onblur to the validate() function!

then you need to add this in the form tag attachment field of the form : onsubmit="validate()"

Regards
Max

Hi Max,

The default validation message is "This is a required field." for all the fields that are listed in the validation form. I was wondering if there is a way to have a different message on a specific field.

Thanks!

if this is V3.0 stable then you can do this easily by setting alt="my message" or title="my message" in the field tag, I can't remember which one will work, test them both!

Regards
Max

Coool!! Didn't see that. This works!

<input type="text" size="30" name="Full_Name" title="Enter your full name here"/>

Great!😉

Hi. I am jumping into old thread. Hope you don't mind. 😀 I have the same situation as LikeStuff.
I found this code on the web and willing to try it, but looks like i need to indicate my form name.
I have no idea what it means, but i'd like to see if this solves validation problem.

function check(form) {
var fn = form.firstname;
var fnv = form.firstname.value;
fnv = fnv.replace(/\s+/g,"");  // strip all spaces OR
//fnv = fnv.replace(/^\s+|\s+$/g,"");  // strip only leading and trailing spaces;
// convert whatever is entered into lower case but with a capitalised first letter
fnv = fnv.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
form.firstname.value = fnv;  // write it back to the field
if ((fnv == "Firstname") || (fnv.length < 2) || (/[^a-z\-\']/gi.test(fnv))) {  // only a-z hyphen and apostophe allowed in proper name
form.firstname.value= "";  // clear the invalid field
alert("Invalid characters or name too short!  Please enter your first name!");
myfield = fn;  // note myfield must be a global variable
setTimeout('myfield.focus();myfield.select();' , 10);  // to overcome bug in Firefox
return false;
}

var ln = form.lastname;
var lnv = form.lastname.value;
lnv = lnv.replace(/\s+/g,"");  // strip all spaces OR
//lnv = lnv.replace(/^\s+|\s+$/g,"");  // strip only leading and trailing spaces;
// convert whatever is entered into lower case but with a capitalised first letter
lnv = lnv.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
form.lastname.value = lnv;  // write it back to the field
if ((lnv == "Lastname") || (lnv.length < 3) || (/[^a-z\-\']/gi.test(lnv))) {  // only a-z hyphen and apostophe allowed in proper name
form.lastname.value= "";  // clear the invalid field
alert("Invalid characters or name too short! Please enter your last name!");
myfield = ln;  // note myfield must be a global variable
setTimeout('myfield.focus();myfield.select();' , 10);  // to overcome bug in Firefox
return false;
}

return true;
}

<form name = "form" action="" onsubmit="return check(this)">
<input id="firstname" name="firstname" type="text" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null" onblur="this.value==''?this.value=this.defaultValue:null">
<input id="lastname" name="lastname" type="text" value="Last Name" onfocus="this.value==this.defaultValue?this.value='':null" onblur="this.value==''?this.value=this.defaultValue:null">
<input type="submit" value="Submit">
</form>

html has form name ="form" and js calls it as 'form.lastname'

Could you give me a hint how to use it without the form name?

Thank you.

Hi freefall,

I'm not quite sure what problem this script solves. It looks very similar to the LiveValidation scripts that come with ChronoForms. I'f sue them first, then add custom LiveValidations if you really need to check the length of a name input.

Bob

Hi Bob, Thank you again for replying. I am building a fancy form thanks to you.

Getting the form name was my question, and i found it in FAQ!!
var form = document.ChronoContact.my_form;

Now i have a js conflict, i guess i am pushing it too hard.

bye the way, problem was my form doesn't validate required field when i have <value="First Name">. So i was trying to reset it to blank field when clicking on Submit button.

Hi freefall,

This is tricky. You can't use the standard Validation code alone because that just checks for a value and your inputs always have the label as a value.

Here's the code for a form that I set up like this:
[attachment=0]05-06-2010 14-37-12.png[/attachment]
You can see that there are labels in the inputs and changed error messages.

The HTML code is fairly standard excpt that there are exta spans for the error messages and a little snippet at the end to load the JavaScript file:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">name</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="A name is required" id="text_0" name="name" type="text" />
  <span class='LV_validation_message' /> </span>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">company</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_1" name="company" type="text" />
  <span class='LV_validation_message' /> </span>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">email</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="A valid email is required" id="text_2" name="email" type="text" />
  <span class='LV_validation_message' /> </span>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">telephone</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="telephone" type="text" />
    <span class='LV_validation_message' /> </span>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">information requested</label>
    <textarea class="cf_inputbox" rows="3" id="text_4" title="" cols="30" name="request"></textarea>
    <span class='LV_validation_message' /> </span>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Send" name="submit" id='submit' type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>
<?php
if ( !$mainframe->isSite() ) { return; }
$doc =& JFactory::getDocument();
$doc->addScript(JURI::base().'components/com_chronocontact/includes/contact/contact.js');
?>

Here is the JavaScript. This is quite long but is actually mostly repetitive:

window.addEvent('domready', function() {

	$('ChronoContact_contact').getElements('input[type=text]').each(function(my_input) {
	 	var label = my_input.getParent().getElement('label');
	 	if ( !my_input.value ) {
	 		my_input.value = label.get('text');
	 		my_input.setStyle('color', '#888');
      		        label.setStyle('display', 'none');
	 	}
	 	showLabel(my_input);
	});
	$('ChronoContact_contact').getElements('textarea' ).each(function(my_input) {
	 	var label = my_input.getParent().getElement('label');
	 	if ( !my_input.value ) {
	 		my_input.value = label.get('text');
	 		my_input.setStyle('color', '#888');
	 		label.setStyle('display', 'none');
	 	}
	 	showLabel(my_input);
	});
	$('submit').addEvent('click', function() {
		$('ChronoContact_contact').getElements('input[type=text]').each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == label.get('text') ) {
		 		my_input.value = '';
		 		my_input.setStyle('color', '#000');
		 	}
		});
		$('ChronoContact_contact').getElements('textarea' ).each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == label.get('text') ) {
		 		my_input.value = '';
		 		my_input.setStyle('color', '#000');
		 	}
		});
	});
	$('submit').addEvent('click', function() {
		$('ChronoContact_contact').getElements('input[type=text]').each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == label.get('text') ) {
		 		my_input.value = '';
		 		my_input.setStyle('color', '#000');
		 	}
		});
		$('ChronoContact_contact').getElements('textarea' ).each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == label.get('text') ) {
		 		my_input.value = '';
		 		my_input.setStyle('color', '#000');
		 	}
		});
	});
	$('submit').addEvent('blur', function() {
		$('ChronoContact_contact').getElements('input[type=text]').each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == '' ) {
		 		my_input.value = label.get('text');
		 		my_input.setStyle('color', '#888');
		 	}
		});
		$('ChronoContact_contact').getElements('textarea' ).each(function(my_input) {
		 	var label = my_input.getParent().getElement('label');
		 	if ( my_input.value == '' ) {
		 		my_input.value = label.get('text');
		 		my_input.setStyle('color', '#888');
		 	}
		});
	});
});
function showLabel(my_input) {
	//var my_input = $('text_0');
	var label = my_input.getParent().getElement('label');
	if ( !my_input.value ) {
		my_input.value = label.get('text');
		label.setStyle('display', 'none');
	}
	my_input.addEvent('focus', function() {
		var label = this.getParent().getElement('label');
		if ( this.value == label.get('text') ) {
			this.value = '';
			this.setStyle('color', '#000');
		}
	});
	my_input.addEvent('blur', function() {
		var label = this.getParent().getElement('label');
		if ( this.value == '' ) {
			this.value = label.get('text');
			this.setStyle('color', '#888');
		}
	});
	my_input.addEvent('submit', function(){
		console.log('onsubmit');
		var label = this.getParent().getElement('label');
		if ( this.value == label.get('text') ) {
			this.value = '';
			this.setStyle('color', '#000');
		}
	});
};

First all the key blocks are repeated, once for the text inputs and again for the textarea (this could probably be improved with better coding).

The first pair of blocks copies the input label into the input and hides the label; this also sets 'click' and 'blur' events that will remove the label when you click into the input and put it back if the input is left empty. (This uses the showLabel() function at the end.)

The second and this pair removes the label when you click on the submit button so that the normal LiveValidation will work OK; and replaces the labels if the form doesn't submit because there is a validation error.

Bob

Thank you so much for sharing your knowledge.

I've been staring at the code (very dizzy and sweaty now..) trying to figure out why inputs don't show label value at all. js file is loaded, but it is not functioning.

1. I copied the js code and put it in the directory(com_chronocontact/include/contact/contact.js)
2. i copied the form code and name it contact

Am i supposed to change something to make it work?

Bob, i am very sorry for being such a annoying person, asking from basic to advanced stuff... 😶

Hi freefall,

OPen your contat form, put the Form HTML in the Form HTML box and the JavaScript in the Form JavaScript box. Save it, test it.

Bob

That was what i did first, but i could only see the regular form, so i tried few different things.
(You didn't think i would bug you without trying hard!!!)

btw, you are not watching world cup?

Hi freefall,

My apologies, a few other changes are needed.

a) If you put the script in the Form JavaScript box then comment out or remove the PHP snippet at the end of the Form HTML that loads it from the file. (Either method is fine, I prefer to use included files.)

b) In the script change all the references to ChronoContact_contact to match the name of your form e.g. ChronoContact_my_form_name

c) Replace all the label.get('text') entries with label.getText() (the script was originally written for a Joomla site running MooTools 1.2 in the front-end).

d) In the Form General tab set "Load ChronoForms CSS/JS Files?" to 'Yes'

That should to it.

Bob

label.getText() did the trick. THANK YOU.😀