Jquery form validation with jquery tooltip for errors

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Jquery form validation with jquery tooltip for errors

zeker
Hello i have a form validated with jquery form validation plugin and it's all function but i wan't to change the errors to show tooltip like insted of a label.

here a link to see:

http://62.48.206.139:8081/clients_1.php


and the code:

 [CODE]

<?php
require_once 'Library/environment.php';
require_once 'Library/templater.php';
require_once 'Library/Diccionary.php';
require_once 'Library/WebMethods.php';

$page->PageTitle = 'Clients';
$page->TemplateName = WebMethods::chooseTemplate();
$page->BodyTitle = 'Clients';
$page->StartPlaceHolder('main');
?>
<link rel="stylesheet" type="text/css" media="screen" href="/css/formcss/screen.css" />
<script src="js/jquery.validate.js" type="text/javascript"></script><script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script><div id="cont-col">
    <div class="ind">
       
        <div class="node">
           

CLIENTS REGISTRATION

            <div class="content">
                <form class="cmxform" id="signupForm" method="get" action="">
                        <fieldset>
                                <div>
                                        <label for="company">Company</label>
                                        <input id="company" name="company" />
                                        <div id="err"></div>
                                </div>
                                <div>
                                        <label for="vat">VAT number</label>
                                        <input id="vat" name="vat" />
                                </div>
                                <div>
                                        <label for="address">Address</label>
                                        <input id="address" name="address" />
                                </div>
                                <div>
                                        <label for="city">City</label>
                                        <input id="city" name="city"/>
                                </div>
                                <div>
                                        <label for="post_code">Post code</label>
                                        <input id="post_code" name="post_code" class="phone"/>                                   
                                </div>
                                 <div>
                                        <label for="post_code_location">Location</label>
                                        <input id="post_code_location" name="post_code_location"/>

                                </div>
                                <div>
                                        <label for="phone">Phone Number</label>
                                        <input id="phone" name="phone" class="phone"/>
                                </div>
                                <div>
                                        <label for="cellphone">Mobile Phone Number</label>
                                        <input id="cellphone" name="cellphone" class="phone" />
                                </div>
                                 <div>
                                        <label for="email">Email</label>
                                        <input id="email" name="email" />
                                </div>
                                <div>
                                        <label for="person_charge">PERSON IN CHARGE</label>
                                        <input id="person_charge" name="person_charge" />
                                </div>
                                <div>
                                        <label for="birthday">DATE OF BIRTH</label>
                                        <input id="birthday" name="birthday" />
                                </div>
                                <div>
                                    <label>---------------------------------------------------------------------------------------------------------------------------------------------------</label>
                                </div>
                                <div>
                                        <label class="long" for="weddings_year">How many Weddings do you have per year? </label>
                                        <input id="weddings_year" name="weddings_year" class="lownumber"/>
                                </div>
                                <div>
                                        <label class="long" for="baptisms_year">How many Baptisms do you have per year? </label>
                                        <input id="baptisms_year" name="baptisms_year" class="lownumber"/>
                                </div>
                               <div>
                                        <label class="long" for="comunions_year">How many Communions do you have per year?  </label>
                                        <input id="comunions_year" name="comunions_year" class="lownumber"/>
                                </div>
                                <div>
                                        <label class="long" for="digital_year">How many Digital Albuns do you order per year?   </label>
                                        <input id="digital_year" name="digital_year" class="lownumber"/>
                                </div>
                                <div>
                                        <label class="long" for="tradicional_year">How many Traditional Albuns do you order per year?  </label>
                                        <input id="tradicional_year" name="tradicional_year" class="lownumber"/>
                                </div>
                                <div>
                                    <label>---------------------------------------------------------------------------------------------------------------------------------------------------</label>
                                </div>
                                <div>
                                        <label><strong>SERVICES</strong></label>
                                </div>
                                 <div>
                                                                                                                                                                                                                                                                                                                                                  
                                                 <input type="checkbox" class="checkbox" id="agree" name="agree" />
                                                 <label class="checkbox" for="agree">Amateur</label>                                                 
                                             
                                                 <input type="checkbox" class="checkbox" id="agree" name="agree" />
                                                 <label class="checkbox" for="agree">studio</label>
                                                 
                                             
                                                 <input type="checkbox" class="checkbox" id="agree" name="agree" />
                                                 <label class="checkbox" for="agree">W. & Social Events</label>

                                             
                                                 <input type="checkbox" class="checkbox" id="agree" name="agree" />
                                                 <label class="checkbox" for="agree">Digital</label>

                                             
                                </div>
                            <div>
                                <label><strong>Design Digital Albums?</strong></label>
                                <label for="gender_male" class="checkbox">
                                    <input  type="radio" id="dda_yes" value="yes" name="myoptions[]" validate="required:true" />
                                    Yes
                                </label>
                                <label for="gender_female" class="checkbox">
                                    <input  type="radio" id="dda_no" value="no" name="myoptions[]"/>
                                    No
                                </label>
                                <label for="myoptions[]" generated="true" class="error" style="display:none"></label>
                            </div>
                                <div>
                                    <input type="submit" class="form-submit" value="Send" id="edit-submit" name="op" onclick="sendMail(this.form)">
                                    <input type="submit" class="form-submit" value="Clear" id="edit-submit" name="op" onclick="this.form.reset()">
                                </div>
                        </fieldset>
                </form>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript"> function sendMail(form) { $(form).validate({ rules: { company: "required", vat: "required", address: { required: true, minlength: 2 }, city: { required: true }, post_code: { required: true, minlength: 4 }, post_code_location: { required: true }, phone: { required: true, minlength: 9, number:true }, cellphone: { required: true, minlength: 9 }, email: { required: true, email: true }, person_charge:{ required:true }, weddings_year:{ number:true }, baptisms_year:{ number:true }, comunions_year:{ number:true }, digital_year:{ number:true }, tradicional_year:{ number:true }, 'myoptions[]':{ required:true } }, messages: { company: "Please enter your Company Name", vat: "Please enter your vat number", address: { required: "Please enter your address", minlength: "Your username must consist of at least 2 characters" }, city: { required: "Please provide a password" }, post_code: { required: "Please provide a password", minlength: "Your postal code must be at least 4 characters long" }, phone: { required: "Please provide a password", minlength: "Your postal code must be at least 9 characters long", number:"must be a number" }, email: "Please enter a valid email address", weddings_year:{ number:"This field is numeric" }, baptisms_year:{ number:"This field is numeric" }, comunions_year:{ number:"This field is numeric" }, digital_year:{ number:"This field is numeric" }, tradicional_year:{ number:"This field is numeric" }, 'myoptions[]':{ required:"Required" } } }); } </script><?=$page->EndPlaceHolder('main');?>
[/CODE]