Bootstrap 使用 jQuery 进行表单验证

Question

我一直在尝试使用 bootstrap 和 jQuery 验证表单。我已经查看了此处的其他类似问题，但 none 的解决方案能够解决我的问题。我当前的代码是

<form>
 <div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" />
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" />
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

我的脚本是这样的

$("form").validate({
rules: {
    emailAdd: {
        required: true
    },
    passWord: {
        required: true
    }
},
highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
}
});

我真的不知道为什么这不起作用，并且尝试了很多我在网上看到的不同解决方案。如果有人能给我指出正确的方向，我将不胜感激！

编辑：

我引用 jQuery 并像这样验证插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

理想情况下，我希望能够将登录和注册限制在某些电子邮件域中。所以我认为这是一个很好的开始方式。在按下提交之前，电子邮件和密码字段必须填写一些值。如果不是，我想突出显示红色框并说 'Field is Required'，或类似的东西。目前当我按下提交按钮时，页面只是刷新。

抱歉，我的原文没有提供足够的信息 post！

Answer 1

试试这个在 html

<form action="#" onsubmit="submitForm();return false">


<div class="form-group">
     <label class="control-label" for="email">Email:</label>
     <div class="input-group">
         <input class="form-control" placeholder="Enter your email address" name="emailAdd" type="text" id="email" required/>
     </div>
  </div>
  <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
             <input class="form-control" placeholder="Enter your password" name="passWord" type="text" id="password" required/>
        </div>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

在jquery

function submitForm(){
var email = $('#email').val();
var password= $('#password').val();
}

Answer 2

您好，您在加载依赖项时遇到了一个问题。 jquery.validate.js 要求 jquery.js 您必须按顺序加载。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>

并且您没有使用电子邮件验证，您需要添加属性 email:true

emailAdd: {
        required: true,
        email: true
    },

看看它是如何工作的：

https://jsfiddle.net/gph2Lz2z/

美好的一天！

Bootstrap 使用 jQuery 进行表单验证

Bootstrap Form Validation with jQuery

jquery

jquery-validate

twitter-bootstrap