bootstrap-validator icon indicating copy to clipboard operation
bootstrap-validator copied to clipboard

Multiple custom validation bug & fix

Open mmswi opened this issue 8 years ago • 0 comments

Hello,

While trying to add 2 different custom validators on two different input files, the validation would be triggered by the first element (email), or if you would start typing in the password element, it would trigger the validation would trigger on the email, also.

  $("#login_form").validator({
    custom: {
      "emailnotfound": function ($el) {
        if ($el.data("trigger-notfound") === true) {
          return $el.data("emailnotfound");
        }
      },
      "incorrectpassword": function ($el) {
        if ($el.data("trigger-incorrectpass") === true) {
          return $el.data("incorrectpassword");
        }
      }
    }
  });

So the fix for this, (which is not in your documentation), is to put the following code:

  if ($("#login_form input[name=password]").data("trigger-incorrectpass") === true ) {
    $("#login_form").validator("validate");
  }

Do you know any other fix?

The nunjucks template where the emailNotFound and incorrectPassword are rendered from nodeJs:

<form id="login_form" class="m-t-md m-b-sm" action="{{submitURL or '/signin'}}" method="post" name="loginForm" data-toggle="validator" autocomplete="off">
          <fieldset>
            <div class="form-group">
              <div class="form-field-wrapper">
                <input type="text" class="form-control {% if emailNotFound or incorrectPassword %}filled{% endif %}" id="email" name="email" autocomplete="off" required maxlength="50"
                       value="{{ emailAddress }}"
                       pattern="^([\w\.\-])+@(([\w\-])+\.)+([\w]{2,4})+$"
                       data-pattern-error="{{ "Please enter a valid email address." | i18n('EmailNotValid') }}"
                       data-required-error="{{ "Please enter an email address." | i18n('EmailRequired') }}"
                       data-emailnotfound="{{ "Try with a different email address." | i18n('SigninEmailNotFound') }}" data-trigger-notfound="{{ emailNotFound }}"
                       data-type-error="{{ "Please enter a valid email address." | i18n('EmailNotValid') }}"
                       data-label="{{"Email address" | i18n('EmailAddress')}}" />
                {% if emailNotFound %}
                <label id="login_email_label" for="email" class="control-label">{{"We can't find an account with this address" | i18n('EmailNotFoundLabel')}}</label>
                {% else %}
                <label id="login_email_label" for="email" class="control-label">{{"Email address " | i18n('EmailAddress')}}</label>
                {% endif %}
                <div id="login_email_error" class="help-block with-errors custom-error" role="alert"></div>
              </div>
            </div>

            <div class="pwd-with-hide clearfix">
              <div class="pwd-field">
                <div class="form-group">
                  <div class="form-field-wrapper">
                    <input type="text" class="form-control pwd-input {% if incorrectPassword %}filled{% endif %}" id="password" name="password" required maxlength="50" autocomplete="off"
                           data-required-error="{{ "Please enter a password." | i18n('PasswordRequired') }}"
                           data-incorrectpassword="{{ "Please enter a password boss." | i18n('PasswordRequired') }}" data-trigger-incorrectpass="{{ incorrectPassword }}"
                           data-label="{{"Password" | i18n('Password')}}" />
                    {% if incorrectPassword %}
                    <label id="password_label" for="password" class="control-label">{{"Password Incorrect" | i18n('PasswordIncorrect')}}</label>
                    {% else %}
                    <label id="password_label" for="password" class="control-label">{{"Password" | i18n('Password')}}</label>
                    {% endif %}
                    <div id="signin_pwd_error" class="help-block with-errors custom-error" role="alert"></div>
                  </div>
                </div>
              </div>
            </div>

            <button id="login_btn" type="submit" class="small m-t-sm">{{"Sign In" | i18n('SignIn')}}</button>

          </fieldset>
        </form>

mmswi avatar Aug 18 '17 12:08 mmswi