Question

我想在不使用任何框架的情况下验证bootstrap模式中的表单。它实际上是一个简单的模态，只有一个输入文本和两个按钮＆＃34;关闭＆＃34;和＆＃34;发送＆＃34;。用户应在输入框中键入他/她的名字，然后单击“发送”。表格是通过方法发送的。

我想要做的是，如果用户没有在输入框中输入任何内容并点击按钮＆＃34;发送＆＃34;，输入框应该有一个红色边框围绕它而不是默认的蓝色边框。这是我的模态代码：

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    <br/>

                    <div class="form-group">

                        <div class="col-lg-12">
                            <label class="control-label" for="firstname">Name</label>
                            <input type="text" class="form-control required" id="firstname" name="firstname">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="myFormSubmit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

我尝试使用javascript将输入文本的类更改为has-error，但它不会产生红色轮廓。当我点击发送它时，通过post方法发送空值而不是这是我的javascript代码：

    <script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

我觉得我在这里混合了很多东西。我还不熟悉bootstrap和javascript。我怎样才能获得所需的红色轮廓？感谢。

编辑：验证功能：

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}

Answer 1

您需要更改CSS 父元素input的{{1}}类，而不是div.form-group本身：

点击提交按钮后的input应如下所示：

HTML

要实现此目的，请将您的<div class="form-group has-error"> <div class="col-lg-12"> <label class="control-label" for="firstname">Name</label> <input type="text" class="form-control required" id="firstname" name="firstname"> </div> </div>代码更改为：

JavaScript

Answer 2

div in boot strap ...

<div class="form-group">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

            <small class="help-block col-sm-offset-0 col-sm-9"
                style="display: none;">city must require</small>
        </div>
    </div>
</div>

正如你所看到的那样.help-block显示：无现在你编写javascript函数并检查验证，如果验证现在通过，则显示：block ...你可以这样做

享受靴带：）

Answer 3

非常容易

只需通过javascript函数将类.has-error应用于div

<div class="form-group has-error">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

        </div>
    </div>
</div>

Answer 4

只需在输入字段中使用必需的内容，如

<input type="text" class="form-control required" id="firstname" name="firstname" required/>

在bootstrap模式中验证输入文本

4 个答案: