使用BootstrapValidator插件验证具有相同名称的字段时出现的问题

时间:2016-02-19 16:31:26

标签: javascript jquery html css twitter-bootstrap

对于我的大多数网站,我使用的是Bootstrap 3框架。在我的表单中,我有四个不同的表单组进行验证,前两个与插件配合良好,其中验证名称和电子邮件地址。现在,Bootstrap 3具有一个功能,您可以使用按钮作为复选框或无线电。我想使用单选按钮功能。在填写表格并从无线电领域中选择一个选项后,我应该得到成功反馈。如果我没有选择任何选项并点击提交,我会得到错误反馈和消息,但它没有为成功而努力。
我跟着bootstrapValidator网站上的一个例子,我看不出我的形式与例子有什么不同。我不确定是否应该有另一个插件或其他东西。
http://bv.doc.javake.cn/examples/#fields-with-same-name

这是我的代码和插件我正在使用:

<" http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <" https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<" http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
    <" http://code.jquery.com/jquery-1.10.2.min.js">
    <" http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">     <" http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js">

<form id="rsvpform" method= "POST" class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2">Name: </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="name" placeholder="Enter Full Name" required></input>
            </div>
    </div>

    <div class="form-group">
        <p>Your email address will only be visible to the couple</p>
        <label class="control-label col-sm-2">Email: </label>
            <div class="col-sm-6">
                <input type="email" class="form-control" name="email" placeholder="Enter an e-mail address" required></input>
            </div>
    </div>
    <p>Will you be attending?</p>
    <div class="form-group">
        <label class="col-xs-3 control-label"></label>
        <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" autocomplete="off" name="attending" value="Yes" /> Yes
        </label>
        <label class="btn btn-default">
            <input type="radio" autocomplete="off" name="attending" value="No" /> No
        </label>
        <label class="btn btn-default">
            <input type="radio" autocomplete="off" name="attending" value="Not Sure" /> Not Sure
        </label>
        </div>
        </div>
        </div>
        <p>Who are you related to?</p>
        <div class="form-group">
            <label class="col-xs-3 control-label"></label>
            <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default">
                            <input type="radio" autocomplete="off" name="family" value="Bride" />Bride
                    </label>
                    <label class="btn btn-default">
                            <input type="radio" autocomplete="off" name="family" value="Groom" />Groom
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" autocomplete="off" name="family" value="Friend" />Friend
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">        
            <div class="col-sm-offset-2 col-sm-6">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>  

$(document).ready(function() {
    $('#rsvpform').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
    },
    // Since the Bootstrap Button hides the radio and checkbox
    // We exclude the disabled elements only
    fields: {
        name: {
            validators: {
                notEmpty: {
                    message: 'Your full name is required and cannot be empty'
                },
                stringLength: {
                    min: 2,
                    message: 'Your name should be longer than two characters'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'An email address is required and cannot be empty'
                },
                emailAddress: {
                    message: 'This email address is not valid'
                }
            }
        },
        excluded: ':disabled',
        attending: {
            validators: {
                notEmpty: {
                    message: 'Are you even attending?'
                }
            }
        },
        family: {
            validators: {
                notEmpty: {
                    message: 'Please state your relation to the couple'
                   }
               }
            }
        }
    });
});

0 个答案:

没有答案