Forums

Hi,

I want to register and dispose of input that is showing when a user is clicking a button in js with the load js on load in Chronoforms v4.

I've already got everything works and adding class validate['required'], but because the classes where adding after the js there are not register for checkForm.

so I've try using

formCheck.register(Enseignant);

FormCheck.register(Enseignant);

In some forum I've seen that we must do formCheck_Form_Name so I've try :

FormCheck_enseignant_date_enregistrement.register(Enseignant);

formCheck_enseignant_date_enregistrement.register(Enseignant);

FormCheck_enseignant-date-enregistrement.register(Enseignant);

formCheck_enseignant-date-enregistrement.register(Enseignant);

my form html is defined by this

<form action="http://www.groupes.polymtl.ca/defiduprofesseurpolynume/index.php/inscription?chronoform=enseignant-date-enregistrement&event=submit" name="enseignant-date-enregistrement" id="chronoform_enseignant-date-enregistrement" method="post" class="Chronoform"> <div class="ccms_form_element cfdiv_text" id="input_ecole_nom1_container_div" style=""><label>Nom de l'école</label><input maxlength="150" size="30" class="input_Ecole_Nom validate['required','alpha']" title="" type="text" value="" name="input_ecole_nom"></form>

When checking in the chrome browser inspector it is always tell me :
Uncaught ReferenceError: formCheck is not defined.

So I don't know what to do. Maybe I've got to formcheck = new FormCheck('form_id'); like saying in the MooTools documentation, but it should be already been defined somewhere.

What name and where should I find the form name or ID to use for the register and dispose?

Hi fulgore84 ,

Please post the full JavaScript code you are using to do this.

Bob

Okay, first of all. I'm using your Show Html [GH]action code to show the form

Second I use this code in the formCheck option.

fieldErrorClass: 'validate_error',fieldValidateClass: 'field_validated',
display: {
  showErrors: 1,
  addClassErrorToField: 1,
  indicateErrors: 2
},

Third, I use this code in a load JS Action

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


  // hide all but the first set
  $$('div.hide_me').each(function(el) {
    el.setStyle('display', 'none');
  });
  
  ValidateInput(1);
  // call the addOne function passing the row number  
  $$('input.add_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.replace('addone_', '');
      addOne(id);
    });
  });
    // call the removeOne function passing the row number  
  $$('input.remove_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.replace('removeone_', '');
      removeOne(id);
    });
  });
  
 // display the next row and hide the last 'Add one' button
function addOne(id) {
  $('#addone_'+id).css('display', 'none');
  $('#removeone_'+(parseInt(id)-1)).css('display', 'none');
  $('#recipient_'+id).css('display', 'block');
  ValidateInput(id);
  //$('#div_addone_'+ (parseInt(id)+1)).css('display', 'block');
}

function removeOne(id)
{
  $('#addone_'+id).css('display', 'block');
  $('#removeone_'+(parseInt(id)-1)).css('display', 'block');
  $('#recipient_'+id).css('display', 'none');
  UnValidateInput(id);
  //$('#div_addone_'+ (parseInt(id)+1)).css('display', 'block');
}


function ValidateInput(id)
{
var Enseignant = $('#recipient_'+id + ' .multiline_nom_ens input');
Enseignant.addClass("validate['required']");
formCheck.register(Enseignant);

var NumberInput = $('#recipient_'+id + ' .multiline_groupe input, #recipient_'+id + ' .multiline_nbrEtudiants input' );
NumberInput.addClass("validate['required','digit']");
//formCheck.register(NumberInput);
}

function UnValidateInput(id)
{
var Enseignant = $('#recipient_'+id + ' .multiline_nom_ens input');
Enseignant.removeClass("validate['required']");
formCheck.dispose(Enseignant);


var NumberInput = $('#recipient_'+id + ' .multiline_groupe input, #recipient_'+id + ' .multiline_nbrEtudiants input' );
NumberInput.removeClass("validate['required','digit']");
formCheck.dispose(NumberInput);
} 
});

I know that the formCheck is defined with

window.addEvent('load', function() {
				new JCaption('img.caption');
			});

window.addEvent('domready', function() {
	
$('chronoform_enseignant-date-enregistrement').addClass('hasValidation');
formCheck = new FormCheckMax('chronoform_enseignant-date-enregistrement', {
	onValidateSuccess: $empty,
	display : {
		showErrors : 1
	},
	fieldErrorClass: 'validate_error',fieldValidateClass: 'field_validated',
display: {
  showErrors: 1,
  addClassErrorToField: 1,
  indicateErrors: 2
},
});
		
});
		
window.addEvent('domready', function() {
			$$('.hasTip').each(function(el) {
				var title = el.get('title');
				if (title) {
					var parts = title.split('::', 2);
					el.store('tip:title', parts[0]);
					el.store('tip:text', parts[1]);
				}
			});
			var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});
		});
  

I think I show put the load JS after the Show Html [GH] if I want that the formCheck to be defined. Also, I think because it is in a different addEvent function, it can't be use in the other function except if I change it to a global variable.Is it the cause of the problem?

I forget to tell that I've modified the formCheck file to add a fieldValidateClass similar to fieldErrorClass, but doesn't change anything and the functionality of formCheck.

Hi fulgore84,

Which version of ChronoForms are you using? The current versions give a unique name to the FormCheck object like formCheck_form_name so that you can reference it.

Bob

Chronoforms 4.0 RC3.5.2.


I've already try :
formCheck
formCheck_chronoform_enseignant_date_enregistrement (ID of the form)
formCheck_chronoform_enseignant-date-enregistrement (ID of the form)
formCheck_enseignant_date_enregistrement (name of the form)
formCheck_enseignant-date-enregistrement (name of the form)



I also updated the load JS to add no conflict, all my other jquery code are in no conflict mode also.

window.addEvent('domready', function() {
 
   if (typeof jQuery != 'undefined' ) {
  jQuery.noConflict();
}

  // hide all but the first set
  $$('div.hide_me').each(function(el) {
    el.setStyle('display', 'none');
  });
  
  ValidateInput(1);
  // call the addOne function passing the row number  
  $$('input.add_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.replace('addone_', '');
      addOne(id);
    });
  });
    // call the removeOne function passing the row number  
  $$('input.remove_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.replace('removeone_', '');
      removeOne(id);
    });
  });
  
 // display the next row and hide the last 'Add one' button
function addOne(id) {
  jQuery('#addone_'+id).css('display', 'none');
  jQuery('#removeone_'+(parseInt(id)-1)).css('display', 'none');
  jQuery('#recipient_'+id).css('display', 'block');
  ValidateInput(id);
  //$('#div_addone_'+ (parseInt(id)+1)).css('display', 'block');
}

function removeOne(id)
{
  jQuery('#addone_'+id).css('display', 'block');
  jQuery('#removeone_'+(parseInt(id)-1)).css('display', 'block');
  jQuery('#recipient_'+id).css('display', 'none');
  UnValidateInput(id);
  //$('#div_addone_'+ (parseInt(id)+1)).css('display', 'block');
}


function ValidateInput(id)
{
var Enseignant = jQuery('#recipient_'+id + ' .multiline_nom_ens input');
Enseignant.addClass("validate['required']");
//formCheck.register(Enseignant);

var NumberInput = jQuery('#recipient_'+id + ' .multiline_groupe input, #recipient_'+id + ' .multiline_nbrEtudiants input' );
NumberInput.addClass("validate['required','digit']");
//formCheck.register(NumberInput);
}

function UnValidateInput(id)
{
var Enseignant = jQuery('#recipient_'+id + ' .multiline_nom_ens input');
Enseignant.removeClass("validate['required']");
//formCheck.dispose(Enseignant);


var NumberInput = jQuery('#recipient_'+id + ' .multiline_groupe input, #recipient_'+id + ' .multiline_nbrEtudiants input' );
NumberInput.removeClass("validate['required','digit']");
//formCheck.dispose(NumberInput);
} 
});

Hi fulgore84,

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

Bob

I didn't put the website online. I'm suppose to finish it this week, just a little bit of css left to do and this bug. I've send you in a private message a backup of the Chronoforms table so you can test it if you want.

Thank you very much for your time

Hi fulgore84,

Thank you for the copy of the form but there is nothing I can do with it as the main part of the form queries your database tables.

One thing I do see is that you have the Dynamic File option turned on in the Load JS action. This loads the JavaScript out of order and means that errors are created as you call formCheck before it it loaded. Turning this option off may help resolve the problem.

I recommend that you do not use the the Dynamic File option unless you specifically need it.

Bob