Title: Boostrap 3.0 & different validation
Last modified: August 21, 2016

---

# Boostrap 3.0 & different validation

 *  Resolved [dhunink](https://wordpress.org/support/users/dhunink/)
 * (@dhunink)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/boostrap-30-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/](http://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [megnicholas](https://wordpress.org/support/users/megnicholas/)
 * (@megnicholas)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4044888)
 * Thank you dhunink, your input is very helpful and very much appreciated.
 * I will be upgrading the plugin to Bootstrap 3.0 when it is formally released 
   and I will include your code.
 * Meg
 *  Thread Starter [dhunink](https://wordpress.org/support/users/dhunink/)
 * (@dhunink)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4045002)
 * Your very welcome, glad to hear it is appreciated!
    If anything needs to be changed
   when bootstrap get’s updated, I will update my code.
 * Btw, you can see it live on my development server: [](http://dennishunink.nl/kdans/contact)
 *  Thread Starter [dhunink](https://wordpress.org/support/users/dhunink/)
 * (@dhunink)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4045095)
 * Hi Meg,
    Bootstrap 3.0 is live now. Any change of updating the plugin? If you’re
   interested, I used the code above in [, see for yourself how it does with Bootstrap 3.0. If I can be of any help, please let me know!](http://kdans.net/contact)
 *  [megnicholas](https://wordpress.org/support/users/megnicholas/)
 * (@megnicholas)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4045105)
 * Hi dhunink
 * Just to keep you updated. I am currently working on this. I’m hoping that I can
   get this out in the next few weeks.
 * Meg
 *  [megnicholas](https://wordpress.org/support/users/megnicholas/)
 * (@megnicholas)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4045110)
 * Hi dhunink
 * I have released a new version of the contact form and it now has support for 
   bootstrap 3.
    I plan on adding the cool icons to the input boxes soon.
 * Hope you like it.
 * Thanks, Meg

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Boostrap 3.0 & different validation’ is closed to new replies.

 * ![](https://ps.w.org/clean-and-simple-contact-form-by-meg-nicholas/assets/icon-
   256x256.png?rev=2552365)
 * [Contact Form Clean and Simple](https://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/clean-and-simple-contact-form-by-meg-nicholas/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/clean-and-simple-contact-form-by-meg-nicholas/)
 * [Active Topics](https://wordpress.org/support/plugin/clean-and-simple-contact-form-by-meg-nicholas/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/clean-and-simple-contact-form-by-meg-nicholas/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/clean-and-simple-contact-form-by-meg-nicholas/reviews/)

## Tags

 * [validation](https://wordpress.org/support/topic-tag/validation/)

 * 5 replies
 * 2 participants
 * Last reply from: [megnicholas](https://wordpress.org/support/users/megnicholas/)
 * Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/boostrap-30-different-validation/#post-4045110)
 * Status: resolved