Conflicting Javascript Problem

Hi, I am developing a contact form page which is reading from few different js files. The contact form validates fine on it’s own without any javascript dropdown menu. However, when i insert the js code for the dropdown menu both javascrips fail to work at all. I would appreciate if someone could help me in relation to conflicting javascripts. Here are the form validation js links in the head of the contact form page.

[code=html]<script type=”text/javascript” src=”../validate.js”></script>
<script type=”text/javascript” src=”../mootools.js”></script>
<script type=”text/javascript” src=”../date-en-GB.js”></script>[/code]

Here is the html and the javascript validation in the body of the contact form page:

[code=html]
<form id=’myForm’ action=”” method=”post”>
<p><label for=”name”>Name:*</label><input id=”name” name=”name” title=”Please enter your name” type=”text” class=”required” /></p>

<p><label for=”email”>Email:*</label><input id=”email” name=”email” title=”Please enter your email” type=”text” class=”required email” /></p>

<p><label for=”subject”>Subject:*</label><input name=”subject” title=”Please enter the subject” type=”text” id=”subject” class=”required”></p>

<p><label for=”query”>Query:*</label><textarea id=”query” name=”query” cols=”32″ rows=”6″ title=”Please enter your query” class=”required”></textarea></p>

<input type=”submit” value=”Submit” id=”submit” class=”submit” />
</form>

<script type=”text/javascript”>

window.addEvent(‘domready’, function(){var myFormValidation = new Validate(‘myForm’,{errorClass: ‘red’
});
});
</script>
[/code]

Here is the code from the validate.js file:

[CODE]/**************************************************************

Script : Validate
Version : 2.1
Authors : Samuel Birch
Desc : Form validation
Licence : Open Source MIT Licence

**************************************************************/

var Validate = new Class({

getOptions: function(){
return {
validateOnBlur: true,
errorClass: ‘error’,
errorMsgClass: ‘errorMessage’,
dateFormat: ‘dd/MM/yy’,
onFail: Class.empty,
onSuccess: false,
showErrorsInline: true,
label: ‘Please wait…’
};
},

initialize: function(form, options){
this.setOptions(this.getOptions(), options);

this.form = $(form);
this.elements = this.form.getElements(‘.required’);

this.list = [];

this.elements.each(function(el,i){
if(this.options.validateOnBlur){
el.addEvent(‘blur’, this.validate.bind(this, el));
}
}.bind(this));

this.form.addEvent(‘submit’, function(e){
var event = new Event(e);
var doSubmit = true;
this.elements.each(function(el,i){
if(! this.validate(el)){
event.stop();
doSubmit = false
this.list.include(el);
}else{
this.list.remove(el);
}
}.bind(this));

if(doSubmit){
if(this.options.onSuccess){
event.stop();
this.options.onSuccess(this.form);
}else{
this.form.getElement(‘input[type=submit]’).setProperty(‘value’,this.options.label);
}
}else{
this.options.onFail(this.getList());
}

}.bind(this));

},

getList: function(){
var list = new Element(‘ul’);
this.list.each(function(el,i){
if(el.title != ”){
var li = new Element(‘li’).injectInside(list);
new Element(‘label’).setProperty(‘for’, el.id).setText(el.title).injectInside(li);
}
});
return list;
},

validate: function(el){
var valid = true;
this.clearMsg(el);

switch(el.type){
case ‘text’:
case ‘textarea’:
case ‘select-one’:
if(el.value != ”){
if(el.hasClass(’email’)){
var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/;
if(el.value.toUpperCase().match(regEmail)){
valid = true;
}else{
valid = false;
this.setMsg(el, ‘Please enter a valid email address’);
}
}

if(el.hasClass(‘number’)){
var regNum = /[-+]?[0-9]*.?[0-9]+/;
if(el.value.match(regNum)){
valid = true;
}else{
valid = false;
this.setMsg(el, ‘Please enter a valid number’);
}
}

if(el.hasClass(‘postcode’)){
var regPC = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/
if(el.value.match(regPC)){
valid = true;
}else{
valid = false;
this.setMsg(el, ‘Please enter a valid postcode’);
}
}

if(el.hasClass(‘date’)){
var d = Date.parseExact(el.value, this.options.dateFormat);
if(d != null){
valid = true;
}else{
valid = false;
this.setMsg(el, ‘Please enter a valid date in the format: ‘+this.options.dateFormat.toLowerCase());
}
}

}else{
valid = false;
this.setMsg(el);
}
break;

case ‘checkbox’:
if(!el.checked){
valid = false;
this.setMsg(el);
}else{
valid = true;
}
break;

case ‘radio’:
var rad = $A(this.form[el.name]);
var ok = false;
rad.each(function(e,i){
if(e.checked){
ok = true;
}
});
if(!ok){
valid = false;
this.setMsg(rad.getLast(), ‘Please select an option’);
}else{
valid = true;
this.clearMsg(rad.getLast());
}
break;

}
return valid;
},

setMsg: function(el, msg){
if(msg == undefined){
msg = el.title;
}
if(this.options.showErrorsInline){
if(el.error == undefined){
el.error = new Element(‘span’).addClass(this.options.errorMsgClass).setText(msg).injectAfter(el);
}else{
el.error.setText(msg);
}
el.addClass(this.options.errorClass);
}
},

clearMsg: function(el){
el.removeClass(this.options.errorClass);
if(el.error != undefined){
el.error.remove();
el.error = undefined;
}
}

});

Validate.implement(new Options);
Validate.implement(new Events);

/*************************************************************/[/CODE]

The validation works fine until i put the following dropdown menu js file into the HTML body for my dropdown menu:

[code=html]<script type=”text/javascript” src=”../fancydropdown.js”></script>[/code]

I’ve uploaded the dropdown js file as a .txt attachment. Can anyone please advise as to what i should do in relation to conflicting javascript files? I’ve searched for the same variable name in both files but all of the variables are named differently. Any other suggestions would be greatly appreciated. Thank you.

[upl-file uuid=acfdf440-f815-4eee-b223-6274635edc6e size=62kB]fancydropdown.txt[/upl-file]

Also in #JavaScript _↴