Question

I am using a custom page template and including jQuery Validation Engine plugin after the <!--Content Row--> comment, the code is as follows

<?php get_header(); ?>
<?php //Template Name:test ?>
<div class="wrap">

<!-- Slider -->
<?php AwesomeSlider(); ?>

<?php
    $titleType    = get_post_meta(get_the_ID(), 'intro_type', true);
    $pageTitle    = '';
    $pageDesc     = '';

    switch ($titleType) {
        case "2":
            $pageTitle    = get_post_meta(get_the_ID(), 'intro_title', true);
            break;
        case "3":
        {
            $pageTitle    = get_post_meta(get_the_ID(), 'intro_title', true);
            $pageDesc     = get_post_meta(get_the_ID(), 'intro_desc', true);
            break;
        }
        default:
            $pageTitle = get_the_title();
            break;
    }
?>
    <!--Intro-->
    <?php if($titleType != '4'){ ?>
    <div id="wrap_intro" >
        <div class="container">
            <div class="intro">
                <h1><?php echo $pageTitle; ?></h1>
                <h3><?php echo $pageDesc; ?></h3>
            </div>
        </div>
    </div>
    <?php } ?>
    <!--Content-->
    <div id="wrap_main" >
        <div class="top_left"></div>
        <div id="main" class="container">
            <!--Content Row-->
        <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/validationEngine.jquery.css" type="text/css"/>
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/languages/jquery.validationEngine-en.js"></script>    
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.8.2.min.js"></script>    
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.validationEngine.js"></script> 
    <script>
        jQuery(document).ready(function(){
            jQuery("#formID").validationEngine('attach');
        });
    </script>
<form id="formID" class="rmular" method="post" action="">
        <fieldset>
            <legend>
                IP Address
            </legend>
            <label>
                <span>IP: </span>
                <input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip" />
            </label>
        </fieldset><input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
    </form>
            <div class="row">
                <?php 
                    $pageClass = 'span9';

                    if(opt('sidebar_position') == 0)
                        $pageClass = 'span12';
                    if(opt('sidebar_position') == 1)
                        $pageClass .= ' blog_right';    
                ?>
                <div class="<?php echo $pageClass; ?>">

                <?php 
                if (have_posts()) { while (have_posts()) { the_post(); 
                ?>
                    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
                        <?php the_content(); ?>
                    </div>
                <?php
                    }//While have_posts
                }//If have_posts
                ?>

                    <!--Comments-->
                    <?php comments_template('', true); ?>
                </div>

                <!--Sidebar-->
                <?php 
                if(opt('sidebar_position') != 0)
                    get_sidebar(); 
                ?>

            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>

I have tried everything but I can't seem to figure out how to make it work, I have also checked other stackoverflow answers on same situation but what error they are telling I cannot find them in my code please help me out because I need IPV4 validation for my site and I can't seem to figure out why it is not working.

Was it helpful?

Solution

Instead of using script tags, try the wordpress php methods for calling jQuery:

<?php

   wp_register_style('validation-css',
        get_template_directory_uri() . "/css/validationEngine.jquery.css",
        false);
   wp_enqueue_style('validation-css');

   //do the same for that form stylesheet with the formular class if you need it 

    /*******
   // Only include this commented section if you really need 
   // that specific version of jQuery for validationEngine to work. Otherwise leave it out 
    wp_deregister_script('jQuery');
    wp_register_script('jquery',
        get_template_directory_uri() . "/js/jquery-1.8.2.min.js", false);
    *****/

    wp_enqueue_script('jQuery');

    wp_register_script('validation',
       get_template_directory_uri() . "/js/jquery.validationEngine.js",
       array('jquery'));
    wp_enqueue_script('validation');

    wp_register_script('validation-language',
       get_template_directory_uri() . "/js/jquery.validationEngine-en.js",
        array('jQuery'));     //not sure about that last param, also try using array('validation') ?
    wp_enqueue_script('validation-language');
 ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top