Formularüberprüfung mit Bootstrap (jQuery)

Question

Aug 18, 2013, 08:15 AM

jquery validation forms twitter-bootstrap javascript

Formularüberprüfung mit Bootstrap (jQuery)

Kann mir bitte jemand mit diesem Code helfen? Ich verwende Bootstrap für das Formular und versuche es mit jQuery zu validieren. Leider sagt mir die Formularüberprüfung nicht, was ich falsch mache. Ich habe das Drehbuch vonhttp://jqueryvalidation.org/documentation/ und folgte einem Tutorial zur clientseitigen Validierung.

<!DOCTYPE html>

<html>
<head>
        <meta charset="utf=8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.validate.min.js"></script> //Script found online

        <script>
            $(document).ready(function(){

             $('#contact-form').validate(
             {
              rules: {
                name: {
                  minlength: 2,
                  required: true
                },
                email: {
                  required: true,
                  email: true
                },
                message: {
                  minlength: 2,
                  required: true
                }
              },
              highlight: function(element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
              },
              success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
              }
             });
            }); // end document.ready
        </script>

    </head>

    <div class="hero-unit">  
        <h1>Contact Form</h1> </br>

    <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">  
        <div class="control-group">  
            <label class="control-label" for="name">Name</label>  
            <div class="controls">  
                <input type="text" name="name" id="name" placeholder="Your name">  
            </div>  
        </div>  
        <div class="control-group">  
            <label class="control-label" for="email">Email Address</label>  
            <div class="controls">  
                <input type="text" name="email" id="email" placeholder="Your email address">  
            </div>  
        </div>
        <div class="control-group">  
            <label class="control-label" for="subject">Subject</label>
            <div class="controls"> 
                    <select id="subject" name="subject">
                        <option value="na" selected="">Choose One:</option>
                        <option value="service">Feedback</option>
                        <option value="suggestions">Suggestion</option>
                        <option value="support">Question</option>
                        <option value="other">Other</option>
                    </select>
            </div>
        </div>
        <div class="control-group">  
            <label class="control-label" for="message">Message</label>  
            <div class="controls">  
                <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>  
            </div>  
        </div>  
        <div class="form-actions">  
            <input type="hidden" name="save" value="contact">  
            <button type="submit" class="btn btn-success">Submit Message</button> 
            <button type="reset" class="btn">Cancel</button>  
        </div>  
    </form>  

</div>  

        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>


    </body>