Boostrap 3.0 & different validation

Hi There,

Bootstrap 3.0 is in beta stadium. But for a site i’m currently developing, i’m already using it. To use your wonderful plugin I had to adjust it to meet the new structure of Bootstrap 3.0. Furthermore, I made some adjustments to the validation part to work perfectly together with it. I thought it would be a good idea to share it with you guys. And perhaps you can benefit from it when updating the plugin.

So for a start, we have to make some adjustments to jquery.validate.contact.form.js
The new function becomes as followed:

$form.validate({ 

            errorElement: 	"span",
            errorClass: 	"has-error",
			validClass:		"has-success",

            highlight: function(element, errorClass, validClass) {
				$(element).closest('.form-group').removeClass(validClass).addClass(errorClass);
		  	},
		  	unhighlight: function(element, errorClass, validClass) {
				$(element).closest('.form-group').removeClass(errorClass).addClass(validClass);
				$(element).closest('span').remove();
		  	},
			success: function(label, errorClass, validClass) {
				$(label).closest('.form-group').removeClass(errorClass).addClass(validClass);
				$(label).html(" ").addClass("checked").hide();// set   as text for IE
				$(label).closest('span').remove();
			},
			errorPlacement: function(error, element) {
				$(error).insertAfter(element.closest('.input-group'));
			}
        });

You’ll see that different error and valid classes are begin used, as well different html elements for the form controls. So the file has to be edited according to the new classes ‘has-error’ and ‘has-success’ as well as ‘form-group’ being the replacement for ‘control-group’.

Second are the adjustments on the view, contact-form.view.php. Basicly I just updated the html structure to meet bootstrap 3.0. As a little adjustment I gave the email input fields type=”email” for better usability on mobile devices. Futhermore I added the glypsicons. The new page code will look as follows:

<!--Clean and Simple Contact Form by Meg Nicholas Version <?php echo $version; ?>-->
<div id="cscf" class="cscfBlock">
    <div class="cscfMessageSent" style="display: none;"><?php echo $messageSentView->Render(); ?></div>
    <div class="cscfMessageNotSent" style="display: none;"><?php echo $messageNotSentView->Render(); ?></div>
    <div class="cscfForm">
        <p><?php echo $message; ?></p>

        <form role="form" id="frmCSCF" name="frmCSCF" method="post">
        <?php wp_nonce_field('cscf_contact','cscf_nonce'); ?>
        <?php if (isset($contact->Errors['recaptcha'])) { ?>
          	<div class="form-group">
          		<p class="text-error"><?php echo $contact->Errors['recaptcha']; ?></p>
            </div>
        <?php } ?>
        	<!--email address -->
          	<div class="form-group<?php if (isset($contact->Errors['email'])) echo ' has-error'; ?>">
                <label for="cscf_email"><?php _e('Email Address:','cleanandsimple');?></label>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-envelope"></span>
                    <input class="form-control input-lg" type="email" id="cscf_email" name="cscf[email]"
                        data-rule-required="true"
                        data-rule-email="true"
                        data-msg-required="<?php _e('Please give your email address.','cleanandsimple');?>"
                        data-msg-email="<?php _e('Please enter a valid email address.','cleanandsimple');?>"
                        value="<?php echo $contact->Email; ?>"
                        placeholder="<?php _e('Your Email Address','cleanandsimple');?>"/>
                </div>
                <span class="help-block"><?php if (isset($contact->Errors['email'])) echo $contact->Errors['email']; ?></span>
          	</div>

            <!--confirm email address -->
            <div class="form-group<?php if (isset($contact->Errors['confirm-email'])) echo ' has-error'; ?>">
            	 <label for="cscf_confirm-email"><?php _e('Confirm Email Address:','cleanandsimple');?></label>
                 <div class="input-group">
                	<span class="input-group-addon glyphicon glyphicon-envelope"></span>
                     <input class="form-control input-lg" type="email" id="cscf_confirm-email" name="cscf[confirm-email]"
                        data-rule-required="true"
                        data-rule-email="true"
                        data-rule-equalTo="#cscf_email"
                        data-msg-required="<?php _e('Please enter the same email address again.','cleanandsimple');?>"
                        data-msg-email="<?php _e('Please enter a valid email address.','cleanandsimple');?>"
                        data-msg-equalTo="<?php _e('Please enter the same email address again.','cleanandsimple');?>"
                        value="<?php echo $contact->ConfirmEmail; ?>"
                        placeholder="<?php _e('Confirm Your Email Address','cleanandsimple');?>"/>
                  	</div>
                    <span class="help-block"><?php if (isset($contact->Errors['confirm-email'])) echo $contact->Errors['confirm-email']; ?></span>
            </div>

            <!-- name -->
            <div class="form-group<?php if (isset($contact->Errors['name'])) echo ' has-error'; ?>">
                <label for="cscf_name"><?php _e('Name:','cleanandsimple');?></label>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-user"></span>
                    <input class="form-control input-lg" type="text" id="cscf_name" name="cscf[name]"
                        data-rule-required="true"
                        data-msg-required="<?php _e('Please give your name.','cleanandsimple');?>"
                        value="<?php echo $contact->Name; ?>"
                        placeholder="<?php _e('Your Name','cleanandsimple');?>"/>
                 </div>
                 <span class="help-block"><?php if (isset($contact->Errors['name'])) echo $contact->Errors['name']; ?></span>
            </div>
            <!-- message -->
             <div class="form-group<?php if (isset($contact->Errors['message'])) echo ' has-error'; ?>">
                <label for="cscf_message"><?php _e('Message:','cleanandsimple');?></label>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-comment"></span>
                    <textarea class="form-control input-lg" id="cscf_message" name="cscf[message]" rows="10"
                        data-rule-required="true"
                        data-msg-required="<?php _e('Please give a message.','cleanandsimple');?>"
                        placeholder="<?php _e('Your Message','cleanandsimple');?>"><?php echo $contact->Message; ?></textarea>
             	</div>
               	<span class="help-block"><?php if (isset($contact->Errors['message'])) echo $contact->Errors['message']; ?></span>
            </div>

            <!-- recaptcha -->
            <?php if ( $contact->RecaptchaPublicKey<>'' && $contact->RecaptchaPrivateKey<>'') { ?>
                <script type="text/javascript">
                 var RecaptchaOptions = {
                    theme : '<?php echo cscf_PluginSettings::Theme(); ?>'
                 };
                 </script>
                <div class="form-group<?php
                    if (isset($contact->Errors['recaptcha'])) echo ' error'; ?>">
                        <div id="recaptcha_div" class="form-control">
                            <?php echo recaptcha_get_html($contact->RecaptchaPublicKey,null,isset($_SERVER['HTTPS'])); ?>
                        <div for="cscf_recaptcha" class="help-inline"><?php if (isset($contact->Errors['recaptcha'])) echo $contact->Errors['recaptcha']; ?></div>
                     </div>
                </div>
            <?php } ?>

            <div class="form-group">
                <button type="submit" class="btn btn-default"><?php _e('Send Message','cleanandsimple');?></button>
          	</div>

        </form>
    </div><!-- end form div -->
</div>

I genuine hope this is helpful for someone!

http://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/