html5 表单验证/引导模式答案

【问题标题】：html5 form validation / bootstrap modalhtml5 表单验证/引导模式
【发布时间】：2015-11-30 14:27:57
【问题描述】：

我通过将输入类型更改为电子邮件来验证我的表单。我有这个表格：

    <form class="validation" action="#" method="get">
        <div class="form-group">
            <input type="email" name="email" value="" class="form-control" id="newsletter" placeholder="Your Email">
            <button data-toggle="modal" data-target="#answer" type="submit" value="Sign up Now"  data-error="Bruh, that email address is invalid" required ><i class="fa fa-angle-double-right"></i></button>
        </div>
    </form>

如果提交时有一个有效的电子邮件地址，我希望打开一个模式。我正在使用 Bootstrap 来实现这一点。问题是即使电子邮件无效，模式也会在提交时打开。我怎样才能解决这个问题？

【问题讨论】：

您是否声明了 HTML 5 文档类型？

标签： html twitter-bootstrap validation

【解决方案1】：

如果您想使用 jQuery 验证任何输入，Look type email 将无法正常工作

<html>
<head>
 <meta charset="utf-8">
 <title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">

</head>
<body>
<form id="myform">
<label for="field">Required, email: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
 <script>
 // just for the demos, avoids form submit
  jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      email: true
}
}
});
</script>
</body>
</html>

然后你可以添加成功的模态

【讨论】：