使用Bootstrap进行表单验证(jQuery)

Question

使用Bootstrap进行表单验证(jQuery)

use*_*351 27 javascript forms validation jquery twitter-bootstrap

有人可以帮我这个代码吗？我正在使用表单的bootstrap并尝试使用jQuery验证它.不幸的是,表单验证并没有告诉我我做错了什么.我从http://jqueryvalidation.org/documentation/获得了脚本,并遵循了客户端验证的教程.

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jay*_*era 38

我在jsFiddle上设置了代码来尝试诊断问题.

http://jsfiddle.net/5WMff/

但是,我似乎没有遇到你的问题.你能看看并告诉我们吗？

HTML

<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>

Run Code Online (Sandbox Code Playgroud)

使用Javascript

$(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');
    }
});
});

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 5

您可以在本教程中获得另一个验证:http: //twitterbootstrap.org/bootstrap-form-validation

他们使用JQuery验证.

jquery.validate.js

jquery.validate.min.js

jquery-1.7.1.min.js

Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

你会在那里得到源代码.

 <form id="registration-form" class="form-horizontal">
 <h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
 <div class="form-control-group">
        <label class="control-label" for="name">Your Name</label>
 <div class="controls">
          <input type="text" class="input-xlarge" name="name" id="name"></div>
 </div>
 <div class="form-control-group">
        <label class="control-label" for="name">User Name</label>
 <div class="controls">
          <input type="text" class="input-xlarge" name="username" id="username"></div>
 </div>
 <div class="form-control-group">
        <label class="control-label" for="name">Password</label>
 <div class="controls">
          <input type="password" class="input-xlarge" name="password" id="password">

</div>
</div>
<div class="form-control-group">
            <label class="control-label" for="name"> Retype Password</label>
<div class="controls">
              <input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="email">Email Address</label>
<div class="controls">
              <input type="text" class="input-xlarge" name="email" id="email"></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="message">Your Address</label>
<div class="controls">
              <textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="message"> Please agree to our policy</label>
<div class="controls">
             <input id="agree" class="checkbox" type="checkbox" name="agree"></div>
</div>
<div class="form-actions">
            <button type="submit" class="btn btn-success btn-large">Register</button>
            <button type="reset" class="btn">Cancel</button></div>
</form>

Run Code Online (Sandbox Code Playgroud)

和JQuery:

<script src="assets/js/jquery-1.7.1.min.js"></script>

<script src="assets/js/jquery.validate.js"></script>

<script src="script.js"></script>
<script>
            addEventListener('load', prettyPrint, false);
            $(document).ready(function(){
            $('pre').addClass('prettyprint linenums');
                  });

Run Code Online (Sandbox Code Playgroud)

以下是代码的实例:http: //twitterbootstrap.org/live/bootstrap-form-validation/

查看完整的教程:http: //twitterbootstrap.org/bootstrap-form-validation/

快乐的编码.

教程的链接似乎已经死了. (8认同)

归档时间：	12 年，2 月前
查看次数：	330535 次
最近记录：	7 年，3 月前