0

「bootstrapvalidator」を使用してフォームを検証しています（ブートストラップの登録およびログインモーダル）。ログインと言うモーダルのいずれかに正しいデータを入力すると、データが正しくないようにログインボタン（ログインフォームを送信）が無効になりますが、パスワードフィールドから数字をクリアして再度入力して送信しようとするとフォームを送信します。

なぜこれが起こっているのか、何がエラーの原因なのかわかりません。

https://cdnjs.comの cdn を 8 つの cdn リンクで合計 cdnを使用しています。

私のフォームコード（モーダルログイン）

<div id="login" class="modal fade " role="dialog">
<div class="modal-dialog login-modal">
    <div class="modal-content">
        <form action="logindone.jsp" method="post" class="form-horizontal" role="form">
            <div class="modal-header">
                <a class="close cross" data-dismiss="modal">x</a>
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="email-name" class="col-md-2 control-label  glyphicon glyphicon-user"></label>
                    <div class="col-md-10">
                        <input type="email" class="form-control" id="email-name" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email-pass" class="col-md-2 control-label glyphicon glyphicon-lock"></label>
                    <div class="col-md-10">
                        <input type="password" class="form-control" id="email-pass" name="password">
                    </div>
                </div>
            </div>
            <div class="modal-footer modal-footer-hidden-border">
                <a href="#" class="btn btn-link" data-dismiss="modal">Forgot password ?</a>
                <button type="submit" value="submit" class="btn btn-danger btn-circle-lg glyphicon">Log in</button>
            </div>
        </form>
      </div>
   </div>
</div>

私のブートストラップバリデーターコード

<script>
$(document).ready(function() {
  var validator = $('#login').bootstrapValidator({
    fields: {
      email: {
        message: "Email is required",
        validators: {
          notEmpty: {
            message: "Please provide an email address"
          },
          stringLength: {
            min: 6,
            max: 35,
            message: "Email must be between 6 and 35 characters long"
          },

          emailAddress: {
            message: "Email address must be valid"
          },
          regexp: {
            regexp: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: 'Not a valid email address'
          }

        }
      }, //.email
      password: {
        validators: {
          notEmpty: {
            message: "Password is required"
          },
          stringLength: {
            min: 8,
            message: "Password must be 8 characters long"
          },
          different: {
            field: "email",
            message: "Email and Password must be different"
          }
        }
      }
    }
  });
});
</script>
4

1 に答える 1

1

There is nothing much wrong with the code, only problem is here $('#login') you are targeting the modal id, 

var validator = $('#login').bootstrapValidator({ //validation code });

you have to target the form selector Read How to call the plugin

so assign an id to form e.g id="loginForm" different then modal id.

<form action="logindone.jsp" id="loginForm" method="post" class="form-horizontal" role="form">

and bootstrapValidator code will be

var validator = $('#loginForm').bootstrapValidator({ //validation code });

Rest is all good

Working Fiddle Example

于 2016-03-22T23:26:45.603 に答える