Question

使用jquery表单验证脚本，＆＃34; 确定！＆＃34;输入正确时显示消息。而不是这个＆＃34; OK！＆＃34;在该字段下的消息，我想将它放在字段的右侧（错误消息仍然在字段下），如下图所示：

这是一个工作小提琴：https://jsfiddle.net/q7nub2v4/1/

以及相应的代码：

    <!DOCTYPE html>
    <html lang="fr">
    <head>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>

    </head>

    <form id="registration-form" action="#" method="POST">

    <div class="col-sm-5"> 
        <div class="control-group has-feedback">
            <label class="control-label" for="username">Username</label>
            <div class="controls">
            <input type="text" name="username" id="username" class="form-control" placeholder="user"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="email">Email</label>
            <div class="controls">
            <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="password">Password</label>
            <div class="controls">
            <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
            </div>

        </div>

        <br>

        <button type="submit" class="btn btn-primary">submit</button>

     </div>

    </form>


    <script>

    $(document).ready(function () {

        $('#registration-form').validate({
            rules: {
                username: {
                    rangelength: [6, 16], 
                    pattern:/^[a-zA-Z0-9_-]+$/,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    rangelength: [8, 12],
                    required: true,

                }

            },

            highlight: function (element) {
                $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('has-error').addClass('has-success');
            }
         });

    });

    </script>

Answer 1

让一些空间（例如：输入宽度为90％）然后将输入框显示设置为“inline-block”。

input[type=text], input[type=password] {  
width: 90%;
display: inline-block;
margin-right: 5px;
}

jsfiddle

Answer 2

只需覆盖form-control

的Bootstrap类

.controls input.form-control{
    width: 90%;
    display: inline-block;
    margin-right: 5px;
}

Working Fiddle

Answer 3

我认为这就是你想要的东西

jsFiddle

POST /?id={object-instance-id or object-url}&amp;scrape=true

和javascript

<form id="registration-form" action="#" method="POST">

  <div class="col-sm-5"> 
    <div class="control-group has-feedback">
        <label class="control-label" for="username">Username</label>
        <div class="controls">
        <div class="col-xs-11">
        <input type="text" name="username" id="username" class="form-control" placeholder="user"/>          
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>
        </div>
    </div>

    <div class="control-group has-feedback">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
        <div class="col-xs-11">        
        <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>

        </div>
    </div>

    <div class="control-group has-feedback">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
        <div class="col-xs-11">
        <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
        </div>
        <div class="col-xs-1 success-msg"></div>
        <div class="clearfix"></div>

        </div>

    </div>

    <br>

    <button type="submit" class="btn btn-primary">submit</button>

</div>

</form>

Answer 4

use it...........



  <!DOCTYPE html>
    <html lang="fr">
    <head>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<style>
.error
{
    display: inline-block;
    float: left;
    width: 109px;
    font-size: 11px;
    line-height: 10px;
    padding: 0px 5px 5px;
}
.controls input
{
    display:inline-block;
    float:left;
    width:auto;
}
.has-feedback
{
    display:block;
    clear:both;
}
.has-feedback .form-control
{
    padding-right:0px;
}
.cutom-btn
{
    display:block;
    clear:both;
    padding:15px 0px;
}
</style>
    </head>

    <form id="registration-form" action="#" method="POST">

    <div class="col-sm-5"> 
        <div class="control-group has-feedback">
            <label class="control-label" for="username">Username</label>
            <div class="controls">
            <input type="text" name="username" id="username" class="form-control" placeholder="user"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="email">Email</label>
            <div class="controls">
            <input type="text" name="email" id="email" class="form-control" placeholder="email"/>
            </div>
        </div>

        <div class="control-group has-feedback">
            <label class="control-label" for="password">Password</label>
            <div class="controls">
            <input type="password" name="password" id="password" class="form-control" placeholder="pass"/>
            </div>

        </div>

        <br>
<div  class="cutom-btn">
        <button type="submit" class="btn btn-primary">submit</button>
        </div>

     </div>

    </form>


    <script>

    $(document).ready(function () {

        $('#registration-form').validate({
            rules: {
                username: {
                    rangelength: [6, 16], 
                    pattern:/^[a-zA-Z0-9_-]+$/,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                password: {
                    rangelength: [8, 12],
                    required: true,

                }

            },

            highlight: function (element) {
                $(element).closest('.control-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('has-error').addClass('has-success');
            }
         });

    });

    </script>

Answer 5

只需添加一个名为reStyle的新类：

.valid {float: right;}
.reStyle{position: relative; top: -30px; right: -30px;}

然后在你的CSS中添加以下行：

{{1}}

表单验证：更改邮件位置

5 个答案: