Question

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

    <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来实现这一目标。问题是即使电子邮件无效，模式也会在提交时打开。我怎样才能解决这个问题？

Answer 1

如果要验证任何输入使用jQuery

，则查找类型电子邮件无法正常工作

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

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

html5表单验证/引导模式

1 个答案: