正在更新jqbootstrapvalidation-match以仅在表单提交时进行验证

updating jqbootstrapvalidation match to validate only on form submit

本文关键字：验证 表单提交 更新 jqbootstrapvalidation-match      更新时间：2023-09-26

如何将jqbootstrapvalidation的匹配更改为仅在表单提交时匹配。像所需字段一样进行匹配。假设我有一个密码和重新键入密码字段。当我点击密码字段时，它在重新键入密码的错误框中显示"匹配验证失败"

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!--<script type="text/javascript" src="js/jquery.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script>
        $(function () { $("input,select,textarea").not([type=submit]").jqBootstrapValidation(); });</script><title</title></head><body>
    <form class="form-horizontal">

        <div class="control-group">
            <label class="control-label">Password</label>
            <div class="controls">
                <input type="password" name="password1" required="required" />
                <p class="help-block"></p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Retype Password</label>
            <div class="controls">
                <input type="password" data-validation-match-match="password1" name="password2" required="required" />
                <p class="help-block"></p>
            </div>
        </div>
        Submit:   <input type="submit" name="submitbtn" id="submitbtn" value="submit" />
    </form>
</body>
</html>

如何进行更改，使匹配验证仅适用于表单提交。任何帮助都将不胜感激。

非常感谢。

我通过编辑jqBootstrapvalidation.js来实现这一点。在validation.validation上，params.submitting确定它是一个提交。

我需要执行一个具有BD访问权限的ajax。因此，我创建了一个新的"验证器"（在validatorTypes: ajax_v2中），其中有一个新属性（somenteSubmit），表示它只在提交时使用。

在js的开头，包括一个新选项：

(function( $ ){
    var createdElements = [];
    var defaults = {
        options: {
            somenteSubmit:false,//indicates the validator will happen only in   submit
            prependExistingHelpBlock: false,
            sniffHtml: true, // sniff for 'required', 'maxlength', etc
            preventSubmit: true, // stop the form submit event from firing if validation fails
            submitError: false, // function called if there is an error when trying to submit
            submitSuccess: false, // function called just before a successful submit event is sent to the server
            semanticallyStrict: false, // set to true to tidy up generated HTML output
            autoAdd: {
                helpBlocks: true
            },
            filter: function () {
                // return $(this).is(":visible"); // only validate elements you can see
                return true; // validate everything
            }
        },

在validation.validation:中

      // =============================================================
      //                                                    VALIDATION
      // =============================================================
      $this.bind(
        "validation.validation",
        function (event, params) {
          var value = getValue($this);
          var validar = true;

          // Get a list of the errors to apply
          var errorsFound = [];
          $.each(validators, function (validatorType, validatorTypeArray) {
            if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) {
              $.each(validatorTypeArray, function (i, validator) {
                  validar=true;
                  if ((!(params && params.submitting)) && (settings.validatorTypes[validatorType].somenteSubmit)) {
                      validar=false;
                  }  
                  if (validar){
                     if (settings.validatorTypes[validatorType].validate($this, value, validator)) {
                      errorsFound.push(validator.message);
                     }
                }
              });
            }
          });
          return errorsFound;
        }
      );

关于ValidatorTypes:

  ajax_v2: {
      name: "ajax_v2",
      init: function ($this, name) {
        return {
          validatorName: name,
          url: $this.data("validation" + name + "Ajax_v2"),
          lastValue: $this.val(),
          lastValid: true,
          lastFinished: true
        };
      },
      validate: function ($this, value, validator) {
            validator.lastValue = value;
            validator.lastValid = true;
            validator.lastFinished = false;
            var resultado= $.ajax({
              url: validator.url+value,
              data: ({}),
              dataType: "html",
              async :false
            }).responseText; ;
            if (resultado=="true") {
                return true;
            }else {
                return false;
            }
      },
      blockSubmit: true,
      somenteSubmit:true //execute this new validator only in submit .
    },

JSP:

                <td>Login</td>
                <td>
                    <div class="control-group">
                        <div class="controls">
                            <input class="form-control" type="text" autofocus="" id="login" name="usuario.login" value="${usuario.login}" size="25" placeholder="Login" required=""
                            data-validation-regex-regex="^[A-Za-z'd]{8,10}$"
                            data-validation-regex-message="O Login deve conter entre oito a dez caracteres (letras ou números)."
                            data-validation-nevermatches-nevermatch="usuario.idCliente"
                            data-validation-nevermatches-message="Login não deve ser igual ao Cartão."
                            data-validation-ajax_v2-ajax_v2="${pageContext.request.contextPath}/pesquisaLogin/"
                            data-validation-ajax_v2-message="Login já existente. Favor informar outro Login." 
                            >  
                            <div class="help-block"></div>
                        </div>
                    </div>
                </td>
相关文章：