Question

I am creating a JavaScript / ajax comment form using the jQuery Validation Plugin.

How do I customize the messages that are sent to the user? Currently, the form returns heuristic type: NAME_FULL server type: NO_SERVER_DATA field signature: 3489289364 form signature: 13828296746807249018 experiment id:"" when a field is left blank.

I just want it to say “Please enter your name.” Here is the JavaScript that controls the plugin and the form:

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

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

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

And the php is pretty straightforward:

$email = $_POST['email'];

if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ 

print "E-mail is correct";

$to      = '[e-mail]';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: [e-mail]';

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

} else {
print "E-mail is not correct";
}

Answer 1

$(document).ready(function() {
    $.extend(jQuery.validator.messages, {
        required: "This field is required.",
        remote: "Please fix this field.",
        email: "Please enter a valid email address.",
        url: "Please enter a valid URL.",
        date: "Please enter a valid date.",
        dateISO: "Please enter a valid date (ISO).",
        number: "Please enter a valid number.",
        digits: "Please enter only digits.",
        creditcard: "Please enter a valid credit card number.",
        equalTo: "Please enter the same value again.",
        accept: "Please enter a value with a valid extension.",
        maxlength: $.validator.format("Please enter no more than {0} characters."),
        minlength: $.validator.format("Please enter at least {0} characters."),
        rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
        range: $.validator.format("Please enter a value between {0} and {1}."),
        max: $.validator.format("Please enter a value less than or equal to {0}."),
        min: $.validator.format("Please enter a value greater than or equal to {0}.")
    });
});

---

EDIT:

Proper implementation of Validation Plugin…

$(document).ready(function() {

    $('#commentForm').validate({
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: $(this).serialize(),
                success: function(returnedData) {
                    $(this).append(returnedData);
                }
            });         
            return false;
        }
    });

});

Validation Plugin Documentation