jQuery验证自定义错误

杰米·斯蒂尔(Jamie Steele)

我目前正在开发一个项目,并且在使用此插件时遇到了很大的困难,我设法使其正常运行而没有自定义错误,我遇到的一个问题是,如果我在所有元素上都需要标签,则电子邮件无法正常工作,但是当我拥有它时仅在电子邮件输入上有效。当我尝试运行自定义验证时,单击“提交”按钮没有任何错误。

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

阿伦·P·约翰尼(Arun P Johny)

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

您具有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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery验证自定义错误消息的位置

来自分类Dev

规则的jQuery验证程序自定义错误消息位置

来自分类Dev

使用Jquery验证添加自定义错误消息

来自分类Dev

jQuery验证:在自定义div中显示错误标签

来自分类Dev

JQuery 验证自定义错误消息未显示

来自分类Dev

自定义验证错误参数

来自分类Dev

django自定义表单验证错误

来自分类Dev

jQuery自定义验证消息

来自分类Dev

jQuery验证-自定义规则

来自分类Dev

jQuery验证自定义方法的麻烦

来自分类Dev

jQuery自定义验证消息

来自分类Dev

jQuery验证插件自定义错误类分配给父div

来自分类Dev

JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息

来自分类Dev

jQuery验证,带有包含确认的自定义错误消息

来自分类Dev

自定义最小和最大错误消息以进行jQuery不干扰验证

来自分类Dev

jQuery自定义验证仅显示最后一个字段的错误

来自分类Dev

如何在jQuery验证插件的空白/错误字段中添加自定义CSS?

来自分类Dev

jQuery验证插件自定义错误类分配给父div

来自分类Dev

添加自定义验证jQuery插件验证

来自分类Dev

使用jQuery验证来验证自定义方法

来自分类Dev

自定义 jQuery 轮播过渡错误

来自分类Dev

密码错误验证的自定义错误消息

来自分类Dev

自定义HTML5表单验证最初不显示自定义错误

来自分类Dev

Firebase自定义身份验证错误:“自定义令牌格式不正确”

来自分类Dev

自定义验证器未显示错误

来自分类Dev

ExtJS findExact()和自定义验证程序错误

来自分类Dev

在错误消息中返回自定义验证方法参数

来自分类Dev

AngularJS自定义表单验证错误消息

来自分类Dev

如何自定义验证属性错误消息?

Related 相关文章

热门标签

归档