Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS JQuery validator not working in WordPress

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #31337
    Alan_Breck
    Participant

    Hello,

    I’m pretty new to WordPress, and am jumping right into it by creating my own template. I am trying to use a contact form that I found on this site (https://css-tricks.com/examples/ContactForm/), but somehow it just won’t work properly in a WordPress environment.

    It doesn’t actually send the message. And the validator does not work when you put incorrect information in the fields.

    When I used the same contact form on a static site, it worked just fine. Read Chris Coyier’s tutorial on properly including JQuery files which helped with one problem, but not the others.

    The site is here – http://susanpriestart.com/?page_id=96

    Thank you so much for your time!

    ~A.B.

    #64876
    clokey2k
    Participant

    I can see that maybe the data in contactengine.php is incorrect, the success/error pages at least (a localhost reference is still there).

    As for the jquery validator you have jquery loaded twice, the second (more up-to-date version) loads after the validate plugin, and probably destroys the plugin.

    I set all of my jquery scripts to load in my functions.php, then they will load in order. Maybe try this yourself, try the example below (filling in the file locations correctly :-) ):

    if (!is_admin()) {
    wp_deregister_script('jquery'); //Stop WordPress default jQuery
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); //Load Googles jQuery
    wp_enqueue_script('jquery');

    //Load jquery plugin
    wp_register_script('jquery_validator','/path/to/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
    wp_enqueue_script('jquery_validator');

    //Load custom script
    wp_register_script('custom','/path/to/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
    wp_enqueue_script('custom');
    }

    In theory they all get loaded in the correct order based on dependency, ‘jquery_validator’ depends on ‘jquery’.

    #64749
    Alan_Breck
    Participant

    Thank you for the reply! I did as you advised… I think :-)… but somehow it’s still not working. When the hover effect worked properly, the validator would not and vice versa. Please forgive my ignorance here, but am I missing something in my header to call those files out of the functions.php file? Here is my header code:


    >








    <br /> <?php<br /> if (function_exists('is_tag') && is_tag()) {<br /> single_tag_title("Tag Archive for ""); echo '" - '; }<br /> elseif (is_archive()) {<br /> wp_title(''); echo ' Archive - '; }<br /> elseif (is_search()) {<br /> echo 'Search for "'.wp_specialchars($s).'" - '; }<br /> elseif (!(is_404()) && (is_single()) || (is_page())) {<br /> wp_title(''); echo ' - '; }<br /> elseif (is_404()) {<br /> echo 'Not Found - '; }<br /> if (is_home()) {<br /> bloginfo('name'); echo ' - '; bloginfo('description'); }<br /> else {<br /> bloginfo('name'); }<br /> if ($paged>1) {<br /> echo ' - page '. $paged; }<br /> ?><br />















    …and here is my functions.php code:

    		if (!is_admin()) {
    wp_deregister_script('jquery'); //Stop WordPress default jQuery
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); //Load Googles jQuery
    wp_enqueue_script('jquery');

    //Load jquery plugin
    wp_register_script('jquery_validator','/wp-content/themes/priest/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
    wp_enqueue_script('jquery_validator');

    //Load custom script
    wp_register_script('custom','/wp-content/themes/priest/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
    wp_enqueue_script('custom');
    }

    Thank you again for your help!

    ~A.B.

    #64687
    clokey2k
    Participant

    The ‘custom’ script -> ‘page.js’ is where I have replaced your inline code (the jquery in your header) and put it in an external file. You don’t have to seperate it but your code has to come AFTER wp_head(). That function is what begins loading all of the enqueued scripts.

    You can also remove your wp_enqueue_script("jquery");
    from your head, if you have it in your functions.php.

    So either place your jquery after the wp_head, or into the ‘page.js’ file. If you don’t use the ‘page.js’ file then remove it from your functions.php, otherwise you are requesting a file that doesn’t exist.

    View the source on the page in your browser and you’ll see your code reference before all other wordpress stuff!

    #64594
    Alan_Breck
    Participant

    That worked! I really appreciate your taking time to help me with this! Thank you so much!

    God bless,
    ~A.B.

    #64595
    Alan_Breck
    Participant

    Wait… hold the presses! I’m still running into a problem…

    When using the Google jQuery library, the hover effect does not work, so I simply replaced that URL to one that points to the original library on the server – worked fine. However, I’m still having validation issues. It validates the e-mail field to make sure a valid e-mail address is typed, but it doesn’t not notify you if you don’t fill in your name and city.

    Here is the code from the contact page –


































    functions.php –

    		if (!is_admin()) {
    wp_deregister_script('jquery'); //Stop WordPress default jQuery
    wp_register_script('jquery', '/wp-content/themes/priest/js/jquery-1.2.6.min.js', false, '1.2.6'); //Load Googles jQuery
    wp_enqueue_script('jquery');

    //Load jquery plugin
    wp_register_script('jquery_validator','/wp-content/themes/priest/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
    wp_enqueue_script('jquery_validator');

    //Load custom script
    wp_register_script('custom','/wp-content/themes/priest/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
    wp_enqueue_script('custom');
    }

    …and the header –

    	



    Thank you again for your time!

    ~A.B.

    BTW: I took your advice on using an external JS file for the hover effect; thank you for that input!

    #64537
    clokey2k
    Participant

    Hmmm… I can’t see any faults/conflicts with the scripts – and there are many from plugins. Maybe download a newer version of jquery to your server and reference that?

    Or try disabling the wp-ecommerce, and nextgen plugins and see if it works after.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.