如何在 Bootstrap 表单上执行客户端和服务器端验证？

Question

我是 bootstrap 领域的新手，过去一直在使用 PHP（不是高级），但我在主题森林中看到了一些很棒的主题，其中很多都是 bootstrap。我真的很喜欢它的外观并下载了一个模板。但是，它们不是很容易编辑。

话虽如此，我有一个时事通讯注册，我想对其执行验证，如果您留空或不输入电子邮件地址，则会显示错误消息。我相信客户端和服务器端会是最好的。根据我的阅读，对于客户端，您可以使用 jQuery 吗？任何帮助将不胜感激。这是表单的代码：

<section class="strip bg-primary">
            <div class="container">
                <div class="row clearfix">
                    <form method="post" enctype="multipart/form-data" class="mail-list-signup" id="form1">
                        <div class="col-sm-9 col-xs-12 pull-left clear-fix">
                            <h3 class="text-white pull-left"><strong>Get Notified.&nbsp;</strong></h3>
                            <input name="email" type="text" class="signup-email-field" id="email" placeholder="Enter your email here here">
                        </div>

                        <div class="col-sm-3 col-xs-12 pull-right text-right">
                            <input type="submit" class="btn btn-primary btn-filled" value="Subscribe">
                        </div>
                    </form>
                </div>

            </div>
            <iframe class="mail-list-form" srcdoc="">
            </iframe>
        </section>

Answer 1

您可以将required 添加到您的输入中

<input name="email" type="text" class="signup-email-field" id="email" placeholder="Enter your email here here" required>

如果为空，则会弹出一条消息。

或

如果你想在 jquery 中定义，

$(document).on('click','[type="submit"]', function() {
    var $value = $('#email').val();

    if($value === "" || $value === null)
    {
         $('#id_to_red_message').html("Empty Email");
    }
});