Inspiring

Question

getting error message: form.addEvent is not a function

Forum|Forum|6 years ago
March 9, 2019
2 replies
1691 views

if you view the below contact form in the console of Chrome Developer tools, after my diagnostic message "V050 add submit form event" is output, we see the error "form.addEvent is not a function".

The console shows this error is coming from my validation.js file at line 44.

As I understand it, the element name form links to the html form tag in contact5.php using the id comments_form and this is linked into the validation.js file by the statement at line 4: var form = $('comments_form');

so it all seems to link together ok and addEvent is a valid mootools method. I know I got this code off the web sometime ago and there's likely other ways to achieve the validation of the form but it's become a puzzle I just must solve and would hate to leave it without working out what's wrong! Any help would be appreciated

http://ancestry.higgsy.co.uk/contact5.php

This topic has been closed for replies.

O

osgood_

Legend

I would just get rid of the mootools validation stuff and use the jQuery library you already have available. All you need is the script below plus you just need to add <div class="formError"></div> BEFORE your opening <form> tag.

<form>

Style it with some css:

.formError {

background-color: red;

padding: 10px;

width: 70%;

margin: 15px auto;

}

.formError h6 {

margin: 0;

padding: 0;

color: #fff;

text-align: center;

font-size: 20px;

}

The validation script:

// COMMENT FORM VALIDATION

$(function(){

$('.formError').hide();

$('#comments_form').submit(function(e){

// check fullname form field

var fullname = $("#fullname").val();

if (fullname == "") {

$('.formError').fadeIn(2000).html("<h6>Please provide your name</h6>").fadeOut(2000);

return false;

}

else if (fullname != null || fullname != "" ) {

$('.formError').hide();

}

// check email form field

var email = $("#email").val();

if (email == "") {

$('.formError').fadeIn(2000).html("<h6>Please provide your email</h6>").fadeOut(2000);

return false;

}

else if (email != null || email != "" ) {

$('.formError').hide();

}

// valid email function

function ValidateEmail(email) {

var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

return expr.test(email);

};

if (!ValidateEmail($("#email").val())) {

$('.formError').fadeIn(2000).html("<h6>Please provide a valid email address</h6>").fadeOut(2000);

return false;

}

if (ValidateEmail($("#email").val())) {

$('.formError').hide();

}

// check comment form field

var comment = $("#comment").val();

if (comment == "") {

$('.formError').fadeIn(2000).html("<h6>Please provide your comments</h6>").fadeOut(2000);

return false;

}

else if (comment != null || comment != "" ) {

$('.formError').hide();

}

// check spam field

var alien_attack = $(".alien_attack").val();

if (alien_attack == "") {

$('.formError').fadeIn(2000).html("<h6>Please provide the securtity question answer</h6>").fadeOut(2000);

return false;

}

else if (alien_attack != 12) {

$('.formError').fadeIn(2000).html("<h6>The security answer is incorrect</h6>").fadeOut(2000);

return false;

}

else if (alien_attack != null || alien_attack != "" ) {

$('.formError').hide();

}

});

</script>

higgsydAuthor

Inspiring

many thanks Osgood. The new contact form is here http://v41.ancestry.higgsy.co.uk/contact6.php but it briefly flashes up the form before seeming to hide it. I inserted your script and css where I thought it should go and then removed all the php code from the page - I've clearly done something stupid here, likely putting things in the wrong place/order?

O

osgood_

Legend

Hi, you just need to close the 'formError' <div> tag (see in bold below)

<div class="formError"> </div>

The line in the jQuery block of code below says hide the 'formError <div> on page load as that is where any form errors will appear when you click the 'submit' button BUT as you haven't closed the <div> </div> its hiding all of the form as the script tries to work out where the end of the 'formError' <div> is.

$( '.formError' ).hide();

Nancy OShea

Community Expert

Errors don't necessarily mean broken you know. If the form works, don't sweat the small stuff. If the form doesn't work, then it's time to find a new script .

Nancy O'Shea— Product User & Community Expert

higgsydAuthor

Inspiring

Nancy, your comment made me think... actually the form works fine and I had to think again why was I examining the error? I was taking a closer look at it as although it seems to be working i.e. you cannot proceed until the fields are correctly filled in, I still regularly get spam mail through it, usually two or three a day. I thought the maths question would fix that (thanks to osgood for that extra code), but either someone is manually entering the correct answer in the field each time or some robot is doing it. Either way I'd like to fix that error because it stops the further checks below it, running, because none of my diagnostic messages in that later code are being output

Nancy OShea

Community Expert

There is no way to prevent human spam. And once your e-mail address gets out in the wild, you will get spammed. There's no way around it except shutting down the old e-mail account and starting fresh with a new one.

Google's reCaptcha will stop spambots. It's a free service but to use it you have to obtain a unique key from Google.

reCAPTCHA: Easy on Humans, Hard on Bots

I haven't used MooTools, Yahoo UI or Scriptaculous scripts in a dog's age. When I need client-side form validation, I use jQuery along with PHP form validation on the server.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded