jQuery 验证不起作用（jqueryvalidation.org）[重复]答案

【问题标题】：jQuery Validate not working (jqueryvalidation.org) [duplicate]jQuery 验证不起作用（jqueryvalidation.org）[重复]
【发布时间】：2017-12-11 17:29:20
【问题描述】：

我有一个表单，尝试使用 jquery.validate.js 进行验证，但它不起作用

表格

<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data" >
    <div class="form-group">
        <label for="user_email">Email address</label>
        <input class="form-control" id="user_email" name="user_email" type="email"  placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="user_password">Password</label>
        <input class="form-control" id="user_password" id="user_password" type="password" placeholder="Password">
    </div>
    <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" />
</form>

下面是 Javascript/JQuery

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="jquery_validation_1_17_0/dist/jquery.validate.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $("#login_form").validate({
            rules: {
                exampleInputEmail1: {
                    required: true,
                    email: true
                },
                exampleInputPassword1: {
                    required: true
                }
            },
            messages: {
                email: "Please enter a valid email address",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                }
            }
        });
    });
</script>

我不知道为什么验证部分不起作用。

我尝试了一些东西，比如在表单中添加novalidate，但我认为该功能没有启动。

请帮忙。

【问题讨论】：

$(document).ready(function() { .. 请留意控制台是否有错误
@Mohamed-Yousef 我已经尝试过了，但没有锁定 :-( 当我在验证内容中添加 console.log - 它给出了错误
你遇到了什么错误？？
当我添加 console.log('some text');消息之前：{ 它给出了语法错误：缺失：属性 id 之后的错误
我认为你的规则应该是规则：{ user_email: { required: true }, nameOfYourPasswordField: { required: true } }

标签： javascript jquery twitter-bootstrap jquery-validate

【解决方案1】：

您的rule 定义有问题！

您可以使用name 属性来寻址您的字段。

也清理了您的输入字段user_password。

看看我的sn-p！

$(document).ready(function() {
  $("#login_form").validate({
    rules: {
      user_email: {
        required: true,
        email: true
      },
      user_password: {
        required: true
      }
    },
    messages: {
      email: "Please enter a valid email address",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>


<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data">
  <div class="form-group">
    <label for="user_email">Email address</label>
    <input class="form-control" name="user_email" id="user_email" type="email" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" name="user_password" id="user_password" type="password" placeholder="Password">
  </div>
  <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" />
</form>

【讨论】：