使用 jQuery 引导表单验证

Question

我一直在尝试使用引导程序和 jQuery 验证表单。我在这里查看了其他类似的问题，但没有一个解决方案能够解决我的问题。 我当前的代码是

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

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

很抱歉在我的原始帖子中没有提供足够的信息！

Answer 1

您好，您在加载依赖项时遇到了一个问题。 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/

美好的一天！

Answer 2

试试这个 在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();
}