Input Field Validation (contact form)

[buzzdee]

Hi,
as described here (http://chevereto.com/docs#!bundled-js), the jquery validation plugin is used in chevereto.
Does somebody have a code snippet, how to implement this validation of input fields in the default contact form? Currently the page just reloads, if a field is empty and the submit-button was hit. No error output!
Furthermore, is there a way to keep the user input in the fields, after the submit-button was hit and a field was empty? Right now, all the user inputs are deleted, and the contact form is just reloading...

Thanks!
BuzzDee

 

[Rodolfo]

Take a look at the js in chevereto.com website.

 

[buzzdee]

This part (in "chevereto.js") ?
I'll have a look....

    // Contact form
    var contact = $('#contactform');
    var $contact = {
        form    : contact,
        send    : contact.find('input[type=submit]'),
        name    : contact.find('input#name'),
        email    : contact.find('input#email'),
        message : contact.find('textarea#message')
    };
    if(contact.exists()) {
        contact.validate({
            rules: {
                name: "required",
                email : {
                    required: true,
                    email: true
                },
                message : {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                name: false,
                email: false,
                message: false
            }
        });
        $contact.send.click(function () {
            validateinput($contact, ['name','email','message']);
        });
    }

 

[Rodolfo]

Yep, that is the syntax. But that one has adds to make it re-usable. You should also look the official documentation http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

[buzzdee]

If someones looking for a quick & dirty solution, here we go:

in the php of your contact page, change this

<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">

to this

<form id="contactform" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">

and add this script inside your php or put it in a js file and reference to it:

<script>
$(document).ready(function(){
$("#contactform").validate({
rules: {
name: "required",
email : {
required: true,
email: true
},
message : {
required: true,
minlength: 4
}
},
messages: {
name: {required: 'This field is required!'},
message: {required: 'This field is required!'},
email: {required: 'This field is required!'}

}
});

});
</script>

Play around with the different options and arguments, described here: http://docs.jquery.com/Plugins/Validation
or as Rodolfo mentioned here: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

[buzzdee]

Wonder what has changed with 2.4.x as this way of validation stopped working. Where has the jquery-validation plugin gone ?