Javascript 在引导模式中验证输入文本

我想在引导模式下验证表单，而不使用任何框架。它实际上是一个简单的模式，只有一个输入文本和两个按钮“关闭”和“发送”。 用户应在输入框中键入其姓名，然后单击“发送”。此表单是随post方法一起发送的

我想做的是，如果用户没有在的输入框中输入任何内容并单击“发送”按钮，则输入框应该有一个环绕它的红色边框，而不是默认的蓝色边框。以下是我的模式代码：

<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还是新手。我怎样才能得到想要的红色轮廓？ 谢谢

编辑： 验证功能：

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

引导带中的div

<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块是display:none，现在您编写javascript函数并检查验证，如果验证现在通过，则使其显示：block。。。这就是你能做到的

---

享受boot strap：）

您需要更改

输入
父元素
div.form-group
，而不是
输入本身的
CSS
类：

单击提交按钮后的
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函数将class.has错误应用于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>


城市：
只需在输入字段中使用required，如下所示

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


谢谢您的帮助。我只懂一两件事。我尝试了你的代码，但是输入从一开始就是红色的。我想我表达得不好。我希望输入只有在点击发送按钮后才显示红色轮廓。如果输入是空的，用户单击发送按钮，那么它应该以红色勾勒出输入。我知道了，我将
HTML
代码放在
DOM
中，以显示
是否存在错误
CSS类。您只需要JavaScript而不需要HTML。的初始状态不应该有
has error
类。哦，好的，我明白了。即使输入文本为空，表单仍会提交。也许我应该阻止表单的默认操作，因为表单使用的是post方法。我该怎么做呢？我以为你在突出错误方面有问题，而不是验证本身。为了帮助验证，我需要您应用于表单的
.validate（）
函数的代码。难以置信！经过几分钟的调试，我发现它之所以不起作用是因为我的
就在您编写的javascript代码下面。我想应该提前打电话。但我认为，当页面加载时，所有javascript代码都会执行，而不管您将它们放在何处。我想我错了。至少我永远不会忘记我的错误。谢谢！：）谢谢你的帮助。我想在输入文本中加上红色的轮廓，但不显示需要特定输入的消息。虽然我同意这是验证表单的一种方法，但这是非常危险的。HTML5验证可以很容易地绕过。@Hanmaslah任何客户端验证都可以很容易地绕过，因此您几乎应该始终使用服务器端验证
<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>

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