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

Posted

技术标签:

【中文标题】使用 Bootstrap (jQuery) 进行表单验证【英文标题】：Form Validation With 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>

【问题讨论】：

【参考方案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 方法。

【讨论】：

以上是关于使用 Bootstrap (jQuery) 进行表单验证的主要内容，如果未能解决你的问题，请参考以下文章

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

如何使用 Twitter Bootstrap 弹出框进行 jQuery 验证通知？

使用 jQuery 对充当 Radio 的按钮进行 Bootstrap3 表单验证

我需要帮助在提交时解除模态。我正在使用 angularJs 进行数据绑定，以及 Jquery 和引导程序（但不是 ui-bootstrap）

在 Symfony v5.2 项目中使用 Jquery-validaton v1.19.3 + Bootstrap v4.6 进行输入验证

Bootstrap 与 Jquery validate 结合使用——多个规则实现