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

【问题标题】：Form Validation With Bootstrap (jQuery)使用 Bootstrap (jQuery) 进行表单验证
【发布时间】：2013-08-20 05:09:30
【问题描述】：

有人可以帮我处理这段代码吗？我正在为表单使用引导程序并尝试使用 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>

【问题讨论】：

标签： javascript jquery forms validation twitter-bootstrap

【解决方案1】：

查看this library，可与bootstrap 3和bootstrap 4配套

jQuery

<form>
    <div class="form-group">
        <input class="form-control" data-validator="required|min:4|max:10">
    </div>
</form>

Javascript

$(document).on('blur', '[data-validator]', function () {
    new Validator($(this));
});

【讨论】：

【解决方案2】：

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

他们使用 JQuery 验证。

jquery.validate.js

jquery.validate.min.js

jquery-1.7.1.min.js

你会在那里得到源代码。

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

还有 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');
                  });

这是代码的实时示例： http://twitterbootstrap.org/live/bootstrap-form-validation/

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

编码愉快。

【讨论】：

教程链接似乎失效了。

【解决方案3】：

这是一个非常简单轻量级的 Boostrap 验证插件，如果你喜欢，可以使用它： https://github.com/wpic/bootstrap.validator.js

【讨论】：

我添加了sample.html

【解决方案4】：

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

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

【讨论】：

原来我的问题是我没有正确调用外部 javascript 文档。谢谢你的帮助！（另外，我试图在那里获得我的自定义 CSS，但 bootstrap.css 一直覆盖 style.css。我最终解决了这个问题。）

【解决方案5】：

请在从表单中删除 div 后尝试在提交按钮上使用 onclick 方法。

【讨论】：