Highlighted

getting error message: form.addEvent is not a function

Participant ,
Mar 09, 2019

Copy link to clipboard

Copied

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

Views

978

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

getting error message: form.addEvent is not a function

Participant ,
Mar 09, 2019

Copy link to clipboard

Copied

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

Views

979

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 09, 2019 0
Adobe Community Professional ,
Mar 09, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 09, 2019 0
Participant ,
Mar 10, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2019 0
Adobe Community Professional ,
Mar 10, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2019 1
LEGEND ,
Mar 10, 2019

Copy link to clipboard

Copied

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.

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

<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:

<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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2019 1
Participant ,
Mar 12, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 12, 2019 0
LEGEND ,
Mar 12, 2019

Copy link to clipboard

Copied

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

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

<form action="contact6.php" method="post" id="comments_form">

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();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 12, 2019 1
Participant ,
Mar 13, 2019

Copy link to clipboard

Copied

many thanks osgod, all my fault - I saw your closing </div> and decided you had made a mistake and surely that <div> was meant to enclose the whole form so I moved the </div> to the bottom of the code!  Now I have put it back where it belongs the form is displayed fine.

But upon completing the form and submitting it, no email got sent!  I then decided this was because the email gets sent by the server-side php that was in the old form.  So I just pasted the php back into the top of the page before the <DOCTYPE.> and hooray the email now gets sent which I think is accomplished at the bottom of the php with the statement:    mail( $email_to, $email_subject, $email_content );

so you'd think I'd be happy BUT if you look at the php code you will see it is littered with many diagnostic statements using error_log() e.g.   error_log( "DH0020 - from contact5", 0 ); but when I check the server's logs none of the messages now appear, the log is blank.

so the way i think this form works is it gets loaded when the user clicks Contact.  the form is then completed by the user and clicks the submit button.  Then the <form action="contact6"  statement causes the form to be reloaded and this time the php at the top of the page is run to check the validity of the user input and finally the php fires off the mail.  is this correct?  I know you are likely to say "the form works, why worry?" but I must be doing something wrong to cause all the diagnostic messages to no longer appear and yet if the mail statement which is in the [hp code is working it tells me the php code is being executed...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2019 0
osgood_ LATEST
LEGEND ,
Mar 13, 2019

Copy link to clipboard

Copied

higgsyd  wrote

so the way i think this form works is it gets loaded when the user clicks Contact.  the form is then completed by the user and clicks the submit button. 

Most probably if you have a form processing php script at the top of the form page, which  incidentally we can't see as that is processed on the server side and not the client side, which the jQuery handles.

higgsyd  wrote

Then the <form action="contact6"  statement causes the form to be reloaded and this time the php at the top of the page is run to check the validity of the user input and finally the php fires off the mail.  is this correct? 

Yes, that is correct but the php script will only execute if the required form information passes client-side validation or someone has javascript turned off. Its essential to have the more robust validation in the php processing script.

higgsyd  wrote

I know you are likely to say "the form works, why worry?" but I must be doing something wrong to cause all the diagnostic messages to no longer appear and yet if the mail statement which is in the [hp code is working it tells me the php code is being executed...

Lots of php form processing scripts are badly written, just old or over-complex.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 13, 2019 1