Home Downloads FAQs Forums Pricing Blog Contact Demo Login
Latest: ChronoForms v8.0.51 update
Home
/
Forums
/
Validation With Placeholders

Validation With Placeholders

How to fix a JavaScript error when using placeholder text validation in a CF form.

Overview

The error occurs because the form's captcha input uses paragraph tags instead of label tags, causing the script to fail when trying to access a label property.
Ensure all form inputs have proper label tags and add checks in the JavaScript to verify a label exists before accessing its properties. Also, confirm the submit button has a valid ID set.

Answered
pe penny 12 Aug, 2014
Validation with the Placeholder Text is not working. I am getting a JS error
Uncaught TypeError: Cannot read property 'getProperty' of null
Which I assume has something to do with a Jquery/Mootool conflict. I read your document on resolving Jquery problems and still can't seem to get rid of the error.
any help would be greatly appreciated
Thanks
Penny
Gr GreyHead 13 Aug, 2014
Hi penny,

Please post a link to the form so I can take a quick look.

Bob
pe penny 13 Aug, 2014
http://clariumfcs.com/
Gr GreyHead 15 Aug, 2014
Hi Penny,

It's failing on the Captcha input because the label is in <p> tags instead of <label> tags. The code may need to be a bit more sophisticated to spot this error and by pass it. Please try replacing this line 
if ( !my_input.value ) {
with 
if ( label && !my_input.value ) {
If I have that right it should skip elements that don't have a label defined.

Bob
pe penny 15 Aug, 2014
Bob,
That didn't work. This is the JS that I have
window.addEvent('domready', function() {
// initialise the form
var inputs = $$('#chronoform_contact_form input[type=text], textarea');
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#888');
label.setStyle('display', 'none');
}
showLabel(my_input);
});
// add events to fire when the submit button is clicked

$('submit').addEvent('click', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == label.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
});
});

// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == '' ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#FFF');
my_input.set('tween', {duration: 'long'});
my_input.tween('color', '#888');
}
});
});
});
// initialisation function adds events to each input
function showLabel(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
}
label.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var label = this.getParent().getElement('label');
if ( this.value == '' ) {
this.value = label.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
};
Gr GreyHead 15 Aug, 2014
Answer
Hi Penny,

It needed the 'label' check added in a few more places, Here's the edited code
window.addEvent('domready', function() {
  // initialise the form
  var inputs = $$('#chronoform_contact_form input[type=text], textarea');
  inputs.each(function(my_input) {
    var label = my_input.getParent().getElement('label');
    if (label && !my_input.value) {
      my_input.value = label.getProperty('text');
      my_input.setStyle('color', '#888');
      label.setStyle('display', 'none');
    }
    showLabel(my_input);
  });
  // add events to fire when the submit button is clicked
  $('submit').addEvent('click', function() {
    inputs.each(function(my_input) {
      var label = my_input.getParent().getElement('label');
      if ( label && my_input.value == label.getProperty('text')) {
        my_input.value = '';
        my_input.setStyle('color', '#000');
      }
    });
  });
  // add events to fire when the submit button loses focus
  $('submit').addEvent('mouseout', function() {
    inputs.each(function(my_input) {
      var label = my_input.getParent().getElement('label');
      if ( label && my_input.value == '') {
        my_input.value = label.getProperty('text');
        my_input.setStyle('color', '#FFF');
        my_input.set('tween', {
          duration: 'long'
        });
        my_input.tween('color', '#888');
      }
    });
  });
});
// initialisation function adds events to each input
function showLabel(my_input) {
  var label = my_input.getParent().getElement('label');
  if ( label && !my_input.value ) {
    my_input.value = label.getProperty('text');
  } else {
    return;
  }
  label.setStyle('display', 'none');
  my_input.addEvent('focus', function() {
    var label = this.getParent().getElement('label');
    if ( label && this.value == label.getProperty('text')) {
      this.value = '';
      this.setStyle('color', '#000');
    }
  });
  my_input.addEvent('blur', function() {
    var label = this.getParent().getElement('label');
    if ( label && this.value == '') {
      this.value = label.getProperty('text');
      this.setStyle('color', '#888');
    }
  });
  my_input.addEvent('submit', function() {
    var label = this.getParent().getElement('label');
    if ( label && this.value == label.getProperty('text')) {
      this.value = '';
      this.setStyle('color', '#000');
    }
  });
};

Bob

PS On your site the validation wasn't working as the Submit Button didn't have an ID set, I updated that too.
pe penny 15 Aug, 2014
OMG!! Yes it works! Thank you so much..
I shall buy you that coffee!!
Penny
This topic is locked and no more replies can be posted.

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Terms Of Use Privacy Policy Business Partners

We accept paypal logo  stripe logo

© 2006 - 2026 ChronoEngine.com