CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Ibrahim
Ibrahim

Reputation: 265

updating jqbootstrapvalidation match to validate only on form submit

How can i change the jqbootstrapvalidation's match to match only on form submit. like the required fields match is carried out. lets say i have a password and retype password field. when i click the password field it says in error box of retype password that "Match validation failed"

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

how can i make the change so that match validation applies only on form submit. any help will be highly appreciated.

Many thanks in advance.

Upvotes: 1

Views: 3903

Answers (1)

Otavio
Otavio

Reputation: 11

I did this by editing the jqBootstrapvalidation.js. On validation.validation, params.submitting determines it is a submit.

I needed to execute a ajax, with BD access. So I created a new "validator" (in validatorTypes: ajax_v2), with a new property (somenteSubmit) to indicate that it's only used at a submit.

In the begin of js, including a new option:

(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
            }
        },

in 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;
        }
      );

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

Upvotes: 1

Related Questions