Nieuw lid |
|
Beste mensen,
Ik ben nogal nieuw met Javascript en heb het volgende probleem.
Op mijn website heb ik een formulier waar verschillende dingen worden gecheckt, om te zorgen dat mensen geen onzin versturen.
Nu heb ik gister een mooie css/js-button gevonden welke ik graag wil gebruiken. Scriptjes geimporteerd en de button werkt alleen de functie van het andere script werkt niet meer. Dus hij checkt en verzend niet meer...
Button van: (http://monc.se/kitchen/59/scalable-c...ground-colors/)
Ik hoop dat iemand mij kan helpen, hieronder de verschillende scripts:
Alvast bedankt voor de moeite!
Mijn form script:
var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true});
lv_firstName.add(Validate.Presence);
lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true});
lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50});
lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true});
lv_lastName.add(Validate.Presence);
lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});
var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true});
lv_emailaddress.add(Validate.Presence);
lv_emailaddress.add(Validate.Email);
var lv_message = new LiveValidation('message', {onlyOnBlur: true});
lv_message.add(Validate.Presence, {failureMessage: ' '});
lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});
var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true}); lv_firstName.add(Validate.Presence); lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50}); lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i}); var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true}); lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50}); lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i}); var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true}); lv_lastName.add(Validate.Presence); lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50}); lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i}); var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true}); lv_emailaddress.add(Validate.Presence); lv_emailaddress.add(Validate.Email); var lv_message = new LiveValidation('message', {onlyOnBlur: true}); lv_message.add(Validate.Presence, {failureMessage: ' '}); lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});
Het button script:
var btn = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
as = btn.getElementsByClassName('btn(.*)');
for (i=0; i<as.length; i++) {
if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
var a1 = document.createElement("a");
a1.appendChild(document.createTextNode(as[i].value));
a1.className = as[i].className;
a1.id = as[i].id;
as[i] = as[i].parentNode.replaceChild(a1, as[i]);
as[i] = a1;
as[i].style.cursor = "pointer";
}
else if (as[i].tagName == "A") {
var tt = as[i].childNodes;
}
else { return false };
var i1 = document.createElement('i');
var i2 = document.createElement('i');
var s1 = document.createElement('span');
var s2 = document.createElement('span');
s1.appendChild(i1);
s1.appendChild(s2);
while (as[i].firstChild) {
s1.appendChild(as[i].firstChild);
}
as[i].appendChild(s1);
as[i] = as[i].insertBefore(i2, s1);
}
if (document.getElementById('submit_btn')) {
btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});
}
},
findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
},
getElementsByClassName : function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
}
btn.addEvent(window,'load', function() { btn.init();} );
var btn = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; as = btn.getElementsByClassName('btn(.*)'); for (i=0; i<as.length; i++) { if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) { var a1 = document.createElement("a"); a1.appendChild(document.createTextNode(as[i].value)); a1.className = as[i].className; a1.id = as[i].id; as[i] = as[i].parentNode.replaceChild(a1, as[i]); as[i] = a1; as[i].style.cursor = "pointer"; } else if (as[i].tagName == "A") { var tt = as[i].childNodes; } else { return false }; var i1 = document.createElement('i'); var i2 = document.createElement('i'); var s1 = document.createElement('span'); var s2 = document.createElement('span'); s1.appendChild(i1); s1.appendChild(s2); while (as[i].firstChild) { s1.appendChild(as[i].firstChild); } as[i].appendChild(s1); as[i] = as[i].insertBefore(i2, s1); } if (document.getElementById('submit_btn')) { btn.addEvent(document.getElementById('submit_btn'),'click',function() { var form = btn.findForm(this); form.submit(); }); } }, findForm : function(f) { while(f.tagName != "FORM") { f = f.parentNode; } return f; }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } }, getElementsByClassName : function(className, tag, elm) { var testClass = new RegExp("(^|\s)" + className + "(\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } } btn.addEvent(window,'load', function() { btn.init();} );
De html:
<p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p>
<p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p>
|