jQuery Form Validation Not Validating

Question

I'm just driving myself crazy here. I can't figure out why my jQuery validation won't work. The function isn't even popping up in dreamweaver, it's like it can't find it. I took this code right off the jQuery website. Someone please help!

This is my HTML code:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Logic & Design: Home</title>
        <link rel="stylesheet" type="text/css" href="styles/divs.css" />
        <link rel="stylesheet" type="text/css" href="styles/fonts.css" />
        <link rel="stylesheet" type="text/css" href="styles/forms.css" />
        <link rel="stylesheet" type="text/css" href="styles/tags.css" />
        <link rel="stylesheet" type="text/css" href="styles/images.css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
        <script src="scripts/animations.js"></script>
        <script src="scripts/socialMediaPlugins.js"></script>        
        <script src="scripts/formValidate.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <img id="logo" alt="logo" src="images/Logo.png" />
            </header>
            <div id="divider">
                <img id="headerDivider" alt="Line" src="images/Line.jpg" />
            </div>
            <nav>
                <div class="Button" id="selectedButton">
                    <img id="arrowOverlay" alt="Overlay" src="images/Arrows/FadeArrow.png" />
                    <img id="extender" alt="Home" src="Images/Arrows/Arrow%20Body.png" />
                    <img id="selectedArrow" alt="Contact Me" src="Images/Arrows/Contact/Contact.png"/>
                </div>
                <div class="Button" id="homeButton">
                    <img alt="Home" src="Images/Arrows/Home/Home.png" />
                </div>
                <div class="Button" id="aboutButton">
                    <img alt="About Me" src="Images/Arrows/About/About.png"/>
                </div>
                <div class="Button" id="abilitiesButton">
                    <img alt="My Abilities" src="Images/Arrows/Abilities/Abilities.png"/>
                </div>
                <div class="Button" id="portfolioButton">
                    <img alt="My Portfolio" src="Images/Arrows/Portfolio/Portfolio.png"/>
                </div>
            </nav>
            <div id="mainContent">
                <div id="innerContent">
                    <form id="emailForm" name="Email" method="post" action="">
                        <div class="FormRow"><label for="Name">Name</label><input name="Name" type="text" /></div>
                        <div class="FormRow"><label for="Email">Email Address</label><input name="Email" type="text" /></div>
                        <div class="FormRow"><textarea name="Message"></textarea></div>
                        <div class="FormRow"><input type="submit" name="Submit" value="Message Me!" /></div>
                    </form>
                    <div id="results"></div>
                </div>
            </div>
            <div id="imageBar">
                <div id="networkingIcons">
                    <div id="fb" class="fb-like-box" data-href="http://www.facebook.com/logicanddesign" data-width="200" data-height="75" data-colorscheme="dark" data-show-faces="false" data-stream="false" data-header="false"></div>
                    <a class="twitter-timeline" href="https://twitter.com/JackSchaible" data-widget-id="266804071627898880">Tweets by @JackSchaible</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                    <div class="g-plus" data-width="199" data-height="69" data-href="https://plus.google.com/105579960548041650339" data-rel="author" data-theme="dark"></div>
                    <script type="text/javascript">
                      (function() {
                        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                        po.src = 'https://apis.google.com/js/plusone.js';
                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                      })();
                    </script>
                    <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>
                </div>
            </div>
            <footer>
                <p>&copy; <script type="text/javascript">document.write((new Date).getFullYear());</script> Jack Schaible</p>
            </footer>
        </div>
        <?php
            /*if ($errors != '') {
                echo '<script type="text/javascript">';
                    echo 'alert($errors);';
                echo '</script>';
            }*/
        ?>
    </body>
</html>

And this is my formValidate.js:

// JavaScript Document
$(document).ready(function(){
    $("#emailForm").validate();
});

Where is your validation rules?

Gihan
– Gihan

2012-11-11 05:17:12 +00:00
Commented Nov 11, 2012 at 5:17 — Gihan
– Gihan, Commented Nov 11, 2012 at 5:17

Gihan · Accepted Answer · 2012-11-11 05:20:27Z

1

I think you are missing validation rules.

            <form id="emailForm" name="Email" method="post" action="">
                <div class="FormRow"><label for="Name">Name</label><input name="Name" type="text" class="required" /></div>
                <div class="FormRow"><label for="Email">Email Address</label><input name="Email" type="text" class="required email" /></div>
                <div class="FormRow"><textarea name="Message"></textarea></div>
                <div class="FormRow"><input type="submit" name="Submit" value="Message Me!" /></div>
            </form>

Should be something like above. Add your validation rules in class attribute of form elements.

answered Nov 11, 2012 at 5:20

Gihan

4,2836 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

Thanks, I'm new to jQuery form validation...didn't see that part on the example.

DevlshOne · Accepted Answer · 2012-11-11 05:16:45Z

0

Are you checking to see if the form is valid? Something like this?

if ($("emailForm").valid() === true) { ... } else { return; }

answered Nov 11, 2012 at 5:16

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Collectives™ on Stack Overflow

jQuery Form Validation Not Validating

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related