表单验证：更改邮件位置

Question

Using a jquery Form validation script, an " OK! " message is displayed when the input is correct. 输入正确时，使用jquery表单验证脚本显示“ OK！ ”消息。 Instead of having this " OK! " message under the field, I'd like to have it on the right side of the field (with the error messages still under the field) as shown on the picture below: 与其在该字段下显示此“ OK！ ”消息，不如将其显示在该字段的右侧（错误消息仍在该字段下），如下图所示：

Here is a working fiddle: https://jsfiddle.net/q7nub2v4/1/ 这是一个有效的小提琴： https : //jsfiddle.net/q7nub2v4/1/

And the corresponding code: 以及相应的代码：

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

Let some space on the rigth (example: input width 90%) then set the input box display to "inline-block". 在竖井上留出一些空间（例如：输入宽度90％），然后将输入框显示设置为“ inline-block”。

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

jsfiddle jsfiddle

Answer 2

Just override form-control class of Bootstrap 只需覆盖Bootstrap form-control类

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

Working Fiddle 工作小提琴

Answer 3

i thing this is what you want 我想这就是你想要的

jsFiddle jsFiddle

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

and the javascript 和JavaScript

$(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.parent().next().text('OK!').addClass('valid')
                .closest('.control-group').removeClass('has-error').addClass('has-success');
        }
    });

});

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

just add a new class called reStyle: 只需添加一个名为reStyle的新类：

<label class="error valid reStyle" for="email" id="email-error">OK!</label>

Then at your CSS add these lines: 然后在您的CSS上添加以下行：

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

表单验证：更改邮件位置

问题描述

5 个解决方案

解决方案1
2 已采纳 2016-02-29 10:31:48

解决方案2
1 2016-02-29 10:39:59

解决方案3
0 2016-02-29 10:29:34

解决方案4
0 2016-02-29 10:46:01

解决方案5
0 2016-02-29 11:03:29

表单验证：更改邮件位置

问题描述

5 个解决方案

解决方案1 2 已采纳 2016-02-29 10:31:48

解决方案2 1 2016-02-29 10:39:59

解决方案3 0 2016-02-29 10:29:34

解决方案4 0 2016-02-29 10:46:01

解决方案5 0 2016-02-29 11:03:29

解决方案1
2 已采纳 2016-02-29 10:31:48

解决方案2
1 2016-02-29 10:39:59

解决方案3
0 2016-02-29 10:29:34

解决方案4
0 2016-02-29 10:46:01

解决方案5
0 2016-02-29 11:03:29