验证提交按钮上的Bootstrap表单

我正在尝试验证Bootstrap表单以检查文本区域是否为空。如果不是,那么它会扩展到较低的div。但是,当我单击“提交”时,没有任何反应,它直接打开了折叠<div>

这是我的代码:

<form class="needs-validation" id="idform" data-toggle="validator" role="form" novalidate>
                <div class="form-group">
                    <div class="row margin-top">
                        <div class="col-md-3 col-xs-3"></div>
                        <div class="col-md-1 col-xs-1">username:</div>
                        <div class="col-md-5 col-xs-5"><p style="display: inline-block;text-align: right;"></p><input type="text" id="username" class="textfield" name="username" required></div>
                        <div class="col-md-3"></div>    
                    </div>
                </div>
                <div class="form-group">
                    <div class="row" style="margin-top: 1%;">
                        <div class="col-md-3 col-xs-3"></div>
                        <div class="col-md-1 col-xs-1">Password:</div>
                        <div class="col-md-5 col-xs-5"><p style="display: inline-block;text-align: right;"></p><input type="password" id="password" class="textfield" name="password" required></div>
                        <div class="col-md-3"></div>    
                    </div>
                </div>
                <div class="row" style="margin-top: 2%;">
                    <div class="col-md-4 col-xs-4"></div>
                    <div class="col-md-2 col-xs-2"><button data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample" href="#collapseExample" type="submit" class="btn button btn-block" id="login" width="100">Login</button></div>
                    <div class="col-md-2 col-xs-2 height-button"><button class="btn button btn-block" id="register">Register</button></div>
                    <div class="col-md-4 col-xs-4"></div>   
                </div>
            </form>

和JQuery:

$('#idform').bootstrapValidator({
feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
},fields: {
    username: {
        validators: {
            notEmpty: {
                message: 'Please Enter your username'
            },}
    },password: {
        validators: {
            notEmpty: {
                message: 'Enter your password'
            }
        }
    },}
    });
yyzlzj 回答:验证提交按钮上的Bootstrap表单

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3133351.html

大家都在问