jQuery验证自定义错误

时间：2016-04-01 03:58:41

标签： javascript jquery api validation

我目前正在开发一个项目并且在使用此插件时遇到了相当困难的时间我设法让它在没有自定义错误的情况下工作我遇到的一个问题是，如果我在所有元素上都需要标记，则电子邮件无法正常工作但是当我在电子邮件输入上有它时，它可以工作。当我尝试运行自定义验证时，按下提交按钮时没有错误。

＆＃13;
＆＃13; 
$(document).ready(function () {
  $(".form-horizontal").validate( {
    rules: {
      name: "required", social: "required", postal: {
        required: true, postal: true
      }
      ,
      phone: {
        required: true, phone: true
      }
      ,
      email: {
        required: true, email: true
      }
    }
    ,
    messages: {
      radio: "Please select a gender.", option: "Please select a province."
    }
  }
  );
}
);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Lab 5 Part B</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/jquery-ui.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
      </div>
      <!--/.navbar-collapse -->
    </div>
  </nav>
  <div class="container">
    <div class="jumbotron">
      <form class="form-horizontal" onsubmit="return false;">
        <fieldset>
          <legend>Contact Details</legend>
          <div class="form-group">
            <label for="inputName" class="col-lg-2 control-label">Name:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name">
            </div>
          </div>
          <div class="form-group">
            <label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)">
            </div>
          </div>
          <div class="form-group">
            <label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-2 control-label">Gender:</label>
            <div class="col-lg-10">
              <div class="radio">
                <div class="status"></div>
                <label>
                  <input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
                </label>
                <label>
                  <input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Province:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <select class="form-control" name="selectProvince" id="selectProvince">
                <option value="">Select One</option>
                <option value="AB">Alberta</option>
                <option value="BC">British Columbia</option>
                <option value="MB">Manitoba</option>
                <option value="NB">New Brunswick</option>
                <option value="NL">Newfoundland & Labrador</option>
                <option value="NS">Novia Scotia</option>
                <option value="NT">Northwest Territories</option>
                <option value="NU">Nunavut</option>
                <option value="ON">Ontario</option>
                <option value="PE">Prince Edward Island</option>
                <option value="QC">Quebec</option>
                <option value="SK">Saskatchewan</option>
                <option value="YT">Yukon</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)">
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
            <div class="status"></div>
            <div class="col-lg-10">
              <input type="email" class="form-control" id="inputEmail" input="inputEmail">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-10 col-lg-offset-2">
              <button type="reset" class="btn btn-default">Cancel</button>
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
    <hr>
    <footer>
      <p>&copy; Jamie Steele 2016</p>
    </footer>
  </div>
  <!-- /container -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script src="js/jquery.validate.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/main.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

在验证规则中，您需要使用输入元素的名称，但在您的情况下不匹配

您在元素中有name="inputName"但在使用name

的规则中 

$(document).ready(function() {
  $(".form-horizontal").validate({
    rules: {
      name: "required",
      social: "required",
      postal: {
        required: true,
        postal: true
      },
      phone: {
        required: true,
        phone: true
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      radio: "Please select a gender.",
      option: "Please select a province."
    }
  });
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">


<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>
<div class="container">
  <div class="jumbotron">
    <form class="form-horizontal" onsubmit="return false;">
      <fieldset>
        <legend>Contact Details</legend>
        <div class="form-group">
          <label for="inputName" class="col-lg-2 control-label">Name:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="name" class="form-control" id="inputName" name="name" placeholder="Your name">
          </div>
        </div>
        <div class="form-group">
          <label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="social" class="form-control" id="inputSocial" name="social" placeholder="(9 digits)">
          </div>
        </div>
        <div class="form-group">
          <label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-2 control-label">Gender:</label>
          <div class="col-lg-10">
            <div class="radio">
              <div class="status"></div>
              <label>
                <input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
              </label>
              <label>
                <input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="select" class="col-lg-2 control-label">Province:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <select class="form-control" name="selectProvince" id="selectProvince">
              <option value="">Select One</option>
              <option value="AB">Alberta</option>
              <option value="BC">British Columbia</option>
              <option value="MB">Manitoba</option>
              <option value="NB">New Brunswick</option>
              <option value="NL">Newfoundland & Labrador</option>
              <option value="NS">Novia Scotia</option>
              <option value="NT">Northwest Territories</option>
              <option value="NU">Nunavut</option>
              <option value="ON">Ontario</option>
              <option value="PE">Prince Edward Island</option>
              <option value="QC">Quebec</option>
              <option value="SK">Saskatchewan</option>
              <option value="YT">Yukon</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="postal" class="form-control" id="inputPostal" name="postal" placeholder="(Ex: L8S5CR)">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="phone" class="form-control" id="inputPhone" name="phone" placeholder="(Ex: 905-321-4587)">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
          <div class="status"></div>
          <div class="col-lg-10">
            <input type="email" class="form-control" id="inputEmail" name="email">
          </div>
        </div>
        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <button type="reset" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <hr>
  <footer>
    <p>&copy; Jamie Steele 2016</p>
  </footer>
</div>

相关问题
最新问题