Jquery form validation with modal dialog box with custom messages

I used the model dialog box, In that form I want to use the jquery form validation. code for Jquery form validation with modal dialog box with custom messages.

Jquery form validation with modal dialog box with custom messages

I used the following HTML code:


<form id="form1" name="form1">
Field 1: <input id="field1" type="text" class="required" />
</form>

<div>
<input id="btn" type="button" value="Validate" />
</div>
<div>
<input id="dialogbtn" type="button" value="Open Dialog" />
</div>

<div id="dialog-form" title="Create new user">
<form id="form2">

<label for="name">Name</label>
<input type="text" name="name" id="name" required="true" />
<br/>
<label for="email">Email</label>
<input type="text" name="email" id="email" required="true" email="true"/>
<br/>
<label for="password">Password</label>
<input type="password" name="password" id="password"/>

</form>
</div>

following is the javascript code:

 


$(function() {
//simple example 1
//click event for first button
$('#btn').click(function() {
$("#form1").valid(); //validate form 1
});

//example to validate inside a dialog box

//dialogopen button click event
$('#dialogbtn').click(function() {
$( "#dialog-form" ).dialog( "open" );
});

//code for dialog
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Save": function() { //on click of save button of dialog
if($('#form2').valid()){ //call valid for form2 and show the errors
//alert('submit form'); //only if the form is valid submit the form
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}

});
});

 

After this i wanted to added the custom error messages.

I used the following code:


jQuery(function ($) {
$("#form2").validate({
errorLabelContainer: '#errors',
messages: {
email: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
name: {
required: "Please enter your name"
}
},
submitHandler: function () {
return false;
}
});
});

Load jQuery library from Google CDN

WordPress itself uses the jquery in all wordpress themes and loads automatically. But it is always good to load the jquery library through google CDN. It saves your sites bandwidth. Many people already written about same so here I am just putting the method.

Load jQuery library from Google CDN

Load the jQuery library from Google CDN is always good for seo and better performance of site. WordPress itself uses the jquery in all wordpress themes and loads automatically.

For more libraries you can visit the following URL:
https://developers.google.com/speed/libraries/devguide

What you need is, just copy and paste the following code into your functions.php file.

function jquery_from_google_cdn() {
   if (!is_admin()) {
      wp_deregister_script('jquery');
      wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1');
      wp_enqueue_script('jquery');
   }
}
add_action('init', 'jquery_from_google_cdn');
Load jQuery library from Google CDN
Load jQuery library from Google CDN

Load jQuery in wordpress footer section will be best

Many latest framework are loading all javascript in footer. They reduce the page loading the errors. But wordpress load the jquery and other javascript in header.

loading javascript libraries in footer will be always best for every web or mobile application. Here in this article, I will show to Load jQuery in wordpress footer section.
But using following code you can load your javascripts and jquery in footer area. You just need to copy and paste the following code into the functions.php file.

Load jQuery in wordpress footer section

function wpai_add_jquery_in_footer( &$scripts) {
	if ( ! is_admin() )
		$scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'wpai_add_jquery_in_footer' );

After doing the this you js scripts will load in footer. This js will load in footer for only normal users, Not for admin user.

Load jQuery in wordpress footer section will be best
Load jQuery in wordpress footer section will be best

 

Best five jquery wordpress slider plugins

In every second wordpress sites we used the slider or slideshow. Sliders are very important in wordpress sites. There are many requirements about different types of sliders. Here I collected some very popular jquery wordpress slider plugins. Slider plugins are required in very second wordpress websites. I tested the following wordpress plugins and it found great features..

Best five jquery wordpress slider plugins

jQuery Slider

This is a highly customizable jQuery Slider plugin. You can set its width, height, pagination and other parameters. You can use it on your post or page using schortcode

JJ NextGen JQuery Slider

The ‘JJ NextGen JQuery Slider’ allows you to create a ‘Nivo slider’ (http://nivo.dev7studios.com/) as a widget or as a shortcode. This plugin uses the ‘NextGen Gallery’ plugin for its images.

Requirements:

NextGen Gallery Integration:

  • This plugin uses the original width and height of the image uploaded so make sure the images are the correct dimensions when uploaded.
  • Alt & Title Text Field: Provide a full url here and the image will link to this. Only works if alt field starts with either of these; /, http, or ftp.
  • Description Field: Will be used as a caption.

RoundAbout JQuery Slider

This plugin allows you to insert a standard version of the Roundabout jQuery rotating slider into any page or post using a shortcode.

Promotion Slider

Promotion slider is a jQuery slider that makes it easy to insert a simple slideshow, or implement multiple rotating ad zones, on a webpage. Because it is highly-customizable, you are in complete control of what shows on the slider, what shows on your promotion pages and how it all works. A simple options page and straight-forward shortcodes provide great flexibility to the average user, while power users can take advantage of special actions and filters built into the plugin to add their own customizations.

WP Orbit Slider

WP Orbit Slider is based around the jQuery Orbit Slider from the excellent team Zurb. It uses a custom post type for each slide and taxonomies to create slider groups. The restriction is one slider per post/page. Dont fill your pages with sliders. Use one. Make it bold and get your message across!

Captain Slider

This is the Slider Plugin I always wished I had. Simply install the plugin, add some slides & use your slider! It’s that easy.

Features:

  • Plenty of Settings like animation, speed, etc.
  • Multiple Sliders
  • Slider Sorter: Order your slides using drag & drop AJAX.
  • Responsive
  • Video Slides
  • Captions
  • Slide Links
  • Shortcode
  • Free

Simple Nivo Slider

The Simple Nivo Slider plugin provides easy access to Gilbert Pellegrom’s excellent jQuery-based Nivo Slider. The admin panel makes it easy to tweak the most commonly used Nivo Slider options from within WordPress.

Cyclone Slider 2

Cyclone Slider 2 follows the keep it simple mantra. It leverages WordPress’ built-in features. It uses custom post for the slideshow, custom fields to store settings, and media uploader for the images. It also uses a template system that allows developers to easily customize the slideshow to their needs. Its simple yet flexible.

Features:

  • Very easy to use interface! Blends seamlessly with your WordPress workflow.
  • Supports image, video, and custom HTML slides.
  • Powered by Cycle 2, the most flexible jQuery slideshow plugin.
  • A template system that allows developers to easily customize the slideshows.
  • Customizable tile transition effects.
  • Ability to add per-slide transition effects.
  • Unlimited slideshows.
  • Unique settings for each slideshow.
  • Supports random slide order.
  • Shortcode for displaying slideshows anywhere in your site.
  • Ability to import images from NextGEN (NextGEN must be installed and active).
  • Ability to use qTranslate quick tags for slide title and descriptions (qTranslate must be installed and active).
  • Allows title and alt to be specified for each slide images.
  • Comes with a widget to display your slideshow easily in widget areas.
  • It’s totally FREE!

Hope you like the list

Best five jquery wordpress slider plugins
Best five jquery wordpress slider plugins

implement jquery UI datepicker in wordpress

wordpress and jquery both are powerful tool. In plugin we need datepicker sometime. In this article i showed how to implement jquery UI datepicker in wordpress

implement jquery UI datepicker in wordpress

Some WP developers use the plugins to add the datepicker in wordpress. But you can add the Jquery datepicker in wordpress. How can use the Jquery UI in your wordpress theme and plugin using following code.  For adding the datepicker in theme you need to just add the following code in functions.php file.

[viral-lock message=”Some Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


add_action( 'init', 'wpapi_date_picker' );
function wpapi_date_picker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
}

add_action( 'wp_footer', 'wpapi_print_scripts');
function wpapi_print_scripts() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
</script>
    <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
}

[/viral-lock]

For showing the datepicker control in theme or plugin use following code.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>
implement jquery UI datepicker in wordpress
implement jquery UI datepicker in wordpress

If you have any issue for adding the datepicker control then please add comment or email me.

How to include jquery ui in wordpress

When you enqueue your script, it enqueues for the whole site including admin panel. Using wordpress hook you can include jquery ui in wordpress website. If you don’t want the script in the admin panel, you can only include them for the site in frontend.

How to include jquery ui in wordpress

This following code you need to add in functions.php file.

function my_add_frontend_scripts() {
    if( ! is_admin() ) {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
    }
}
add_action('init', 'my_add_frontend_scripts');
How to include jquery ui in wordpress
How to include jquery ui in wordpress

Then you are able to see the jquery-ui in your wordpress theme.

wordpress comment preview for box comment without plugin

Showing wordpress comment preview for comment box is always good for attracting the visitors. I shown code here for show the comments preview.

wordpress comment preview for comment box

Many times comments preview will be useful for visitors to see how comments will be looking. Using google Jquery or wordpress jquery you can add the comment preview to your wordpress blog. Showing comment preview is always good for attracting the visitors. Many clients demands for this. I shown you the example code over here for show the comments preview.

In this tutorial I am using the wordpress inbuild jquery.  First open your header. php file from your theme folder and after head tag following code.


<?php wp_enqueue_script(</code><code>'jquery'</code><code>); ?>
<?php if (is_single()) { ?>

<script type="text/javascript">

jQuery(document).ready(function(){

	jQuery("").add("<h3 id='preview-title'>Comment Preview</h3><div id='comment-preview'></div>").appendTo(document.body);
	jQuery("#comment-preview, #preview-title").insertAfter("#comment");

	var $comment = '';
	jQuery('#comment').keyup(function() {
		$comment = jQuery(this).val();
		$comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
		jQuery('#comment-preview').html( $comment );
	});

});

</script>
<?php } ?>

Then Open Your style.css file from your theme folder put the following code in that file.

#comment-preview {
	border: 1px solid #ccc;
	padding: 5px 15px 15px 15px;
	}
h3#preview-title {
	margin-bottom: 5px
	}

After that upload the modified files on server. you will see following functionality for your wordpress commnets section.

wordpress comment preview for comment box
wordpress comment preview for comment box

If you are not wordpress developer then please dont try this.

Create an Autocomplete Search Field in wordpress

WordPress tutorial for, Create an Autocomplete Search Field in wordpress. In wordpress also you can easily achieve the auto complete search form easily.

Create an Autocomplete Search Field in wordpress

Now auto complete search box is very common for every web projects. Auto complete search functionality you can see in google also. In wordpress also you can easily achieve the auto complete search form easily.

Create an Ajax-based Auto complete Search Field in wordpress
Create an Ajax-based Auto complete Search Field in wordpress

There is very nice Jquery plugin for auto complete. First download the latest version of jQuery , as well as the autocomplete plugin. Now, create a folder in your theme called “javascripts” and copy paste the two files in that folder. Open your header.php from your wordpress theme folder and put following code in that file.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/javascripts/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
    var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
    $("#SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Just you need change the search input box id in place of SEARCH_INPUT_BOX.
If you are wordpress developer then only use the above code in header.php file. If you are facing any issue then please write to on support@purabtech.in.

Here are some very useful articles which are related to wordpress Search functionality.

Add a search from in your navigation menu of wordpress theme

Set the style for default search widget

add ajax pagination in wordpress blog

For without refresh the data from home page if you want to show the pages and pagination in wordpress blog than you can use the following code for add ajax pagination in wordpress blog.

add ajax pagination in wordpress blog

With the help of jquery you can easily add the pagination wordpress blog site. You just need to add the following code into header.php file.

[viral-lock message=”Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php wp_enqueue_script('jquery'); ?>
<script>
jQuery(document).ready(function(){
 // ajax pagination
 jQuery('#wp_pagination a').live('click', function(){ // if not using wp_pagination, change this to correct ID
 var link = jQuery(this).attr('href');
 // #main is the ID of the outer div wrapping your posts
 jQuery('#main-container').html('<div><h2>Loading...</h2></div>');
 // #entries is the ID of the inner div wrapping your posts
 jQuery('#main-container').load(link+' #entries')
 });
}); // end ready function
</script>

[/viral-lock]

just put above code in header.php file in head section. Just make sure that you are putting above code after wp_head function.

add ajax pagination in wordpress blog
add ajax pagination in wordpress blog

If you are not wordpress developer then dont use following code and If you are facing any issue then write to me on support@purabtech.in

smart way to use jquery in wordpress theme

I created many wordpress themes for various purpose and clients. Jquery is common requirement for all the project. That is for menu, slider or validation and for effects. In wordpress adding the Jquery is very easy because wordpress itself uses the Jquery for admin panel. They provided the wordpress api for adding the jquery in wordpress theme files.

smart way to use jquery in wordpress theme

wordpess developers are always looking for wordpress jquery plugin, wordpress include jquery, wordpress jquery ui, wordpress jquery noconflict, wordpress jquery theme, wordpress jquery version, wordpress jquery slider, wordpress jquery not working. Here is the solution

smart way to use jquery in wordpress theme
smart way to use jquery in wordpress theme

Following is the simplest way to add jquery in wordpress theme.You just need to use the following code in your wordpress theme  functions.php file.


function my_init() {
 if (!is_admin()) {
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

This way you can easily add the juqery in wordpress theme.

You can add the jquery from google also. Because google also like jquery. You just need to put the following function in your functions.php file.

function my_init() {
	if (!is_admin()) {

		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');

	}
}
add_action('init', 'my_init');

Main reason adding jquery from google is that will load the jquery faster in your site.

How you can use jquery in your theme.

you can use the jquery anywhere in theme file as follows


jQuery(function ($) {
 /* You can safely use $ in this code block to reference jQuery */
});

For DOM ready function or onload event you can use the juqery as follows.


jQuery(document).ready(function($) {

//Your custom code will goes here.

})

You can use the above function for slider or menu and any effect in your wordpress theme.

If you want to know about more Jquery and wordpress then you can refer following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

If you face any issue using jquery with wordpress then please write comment or email me on support@purabtech.in