PHP / AJAX / Jquery Comment Form Validation

Question

I am creating a comment form based on the jquery validation plugin (http://docs.jquery.com/Plugins/Validation). I know that javascript can easily be manipulated by hackers, so I was wondering how to validate via php to insure that the comment form does not generate a lot of spam emails?

The js is directly from the validation plugin. The html form is directly from the JS validation plugin page. The additional js is below:

  <script>
  $(document).ready(function(){
  $("#commentForm").submit(function(){
    if($("#commentForm").validate()){
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData){
                alert(returnedData);
            }
        });
    }
    return false;
});
});
  </script>

<form class="cmxform" id="commentForm" method="POST" action="process.php">
   <label for="cname">Name</label>
   <input id="cname" name="name" size="25" class="required" minlength="2" />
   <label for="cemail">E-Mail</label>
   <input id="cemail" name="email" size="25"  class="required email" />
   <label for="curl">URL</label>
   <input id="curl" name="url" size="25"  class="url" value="" />
   <label for="ccomment">Your comment</label>
   <textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
<input class="submit" type="submit" value="Submit"/>

The php is pretty standard currently. Not sure how to integrate the validation with js and ajax:

<?php

$to      = '[email protected]';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: [email protected]';

mail($to, $subject, $message, $headers);

print "Form submitted successfully: <br>Your name is <b>".$_POST['cname']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>

Thanks for any help. Someone has commented that this is vague. To clarify:

I understand how to use php to validate email length, unnecessary characters, etc. I do not understand how the jquery validation plugin works via ajax. I need to know how to configure my php conditionals to properly validate the comment form to protect against spam.

this is very vauge. But you can validate the length of variables using php.net/manual/en/function.strlen.php (strlen), you can validate the email using a Regular expression linuxjournal.com/article/9585. It will take a combination of js and php validation to prevent someone from manually submitting a form without passing your js validation. You can then return json to your front end or just ignore the request if validation fails. — j_mcnally
– j_mcnally, Commented Feb 19, 2012 at 22:09
I understand the concepts of php validation. I don't understand how to integrate these concepts with the jquery validation plugin and ajax. I have clarified above. Thank you — Nick Bewley
– Nick Bewley, Commented Feb 19, 2012 at 22:17
I am almost positive that these two things happen independently of each other, you should be validating it via javascript and via php. Because some can hit you endpoint without using your form at all. — j_mcnally
– j_mcnally, Commented Feb 19, 2012 at 22:19

user1189402 · Accepted Answer · 2012-02-19 22:31:45Z

1

Ok the way you do this is pretty straight forward. So you have a submit function, but before you actually send a request to the .php file, you need to validate the input. Your code is pretty sound so far, but you need to start with the validate function. That could look something like this(in jQuery). Let's say that your input fields have the following id: #input1,#input2,#input3,#input4.

    function validate()
{
    if($('#input1).val()=='' || $('#input2).val()==''|| $('#input3).val()=='' $('#input4).val()=='') return 0;
    else return 1;

}

This would be the most basic way to use validation. If you don't want jQuery, you could replace $('#input1) with docoument.getElementById(the old fashioned way). If you also want to make it look nice for the user, you could validate each input field on blur! For instance, let's assume the user focuses on the first input field, #input1

$('#input1).focus(function(){change the background color,add a border, or anything you want just to let the users see which input they clicked/tabbed on.}).blur(function(){check if the input is valid and if it's not display a message or anything you want.});

answered Feb 19, 2012 at 22:31

user1189402

Sign up to request clarification or add additional context in comments.

3 Comments

Nick Bewley Over a year ago

Hi do I have to go in and validate the inputs for jquery manually as your saying above? it seems that the plugin itself (jquery.validate.js) does this automatically via the form I have added above. Its just straight from the plugin page.

user1189402 Over a year ago

you could use either. Personally, I prefer to use a more in depth validation for all the inputs, but if you only need the basic stuff, jQuery will do that for you. so you can simply call the validate function on blur or submit if all the inputs are valid. I like to display a green 'ok' check on blur if the input is valid or a red x otherwise. it looks nice, or at least that's what i think. Nonetheless, this is a matter of preference. If you know what kind of validation you need, your choice is easy. And if you need more help, you know where to find it! Good luck

Nick Bewley Over a year ago

I see what you mean thank you. I like the idea of using jquery blur value also. I think probably I will use the basic jquery validation then validate further using php. Never done this yet before so work in progress. Definitely have to post further here later. Thank you

Collectives™ on Stack Overflow

PHP / AJAX / Jquery Comment Form Validation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related