web-dev-qa-db-ja.com

bootstrap modalで入力テキストを検証する

bootstrapモーダルでフォームを検証せずに、フレームワークを使用しません。これは、実際には入力テキストと2つのボタン「閉じる」と「送信」だけのシンプルなモーダルです。ユーザーは、 /彼女の名前を入力ボックスに入力し、[送信]をクリックします。フォームはメソッドpostで送信されます。

私がやりたいのは、ユーザーがの入力ボックスに何も入力せずに[送信]ボタンをクリックした場合、入力ボックスには、デフォルトの青い境界線ではなく赤い境界線が表示されるはずです。これが私のモーダルのコードです：

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    <br/>

                    <div class="form-group">

                        <div class="col-lg-12">
                            <label class="control-label" for="firstname">Name</label>
                            <input type="text" class="form-control required" id="firstname" name="firstname">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="myFormSubmit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

Javascriptを使用して入力テキストのクラスをhas-errorに変更しようとしましたが、赤いアウトラインが生成されません。 [送信]をクリックすると、次の代わりにpostメソッドを介して空の値が送信されます。

    <script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

ここで色んなものを混ぜているような気がします。私はまだbootstrapとjavascriptに慣れていません。希望の赤いアウトラインを取得するにはどうすればよいですか？ありがとう。

編集：関数の検証：

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
6
mkab

CSSのinputクラスを変更する必要があります_ parent element div.form-group、input自体ではない：

送信ボタンをクリックした後のHTMLは次のようになります。

<div class="form-group has-error">
   <div class="col-lg-12">
      <label class="control-label" for="firstname">Name</label>
      <input type="text" class="form-control required" id="firstname" name="firstname">
    </div>
</div>

これを実現するには、JavaScriptコードを次のように変更します。

<script type="text/javascript">
  $('#myForm').on('submit', function(e) {
    var firstName = $('#firstname');

    // Check if there is an entered value
    if(!firstName.val()) {
      // Add errors highlight
      firstName.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });
</script>
12
Plamen Nikolov

それは非常に簡単です

javascript関数で.has-errorクラスをdivに適用するだけです

<div class="form-group has-error">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

        </div>
    </div>
</div>
1
Minesh

ブートストラップのdiv ...

<div class="form-group">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

            <small class="help-block col-sm-offset-0 col-sm-9"
                style="display: none;">city must require</small>
        </div>
    </div>
</div>

ご覧のとおり、.help-block is display：なし。javascript関数を記述して検証をチェックし、検証が成功した場合は表示に表示します：block ...

ブートストラップでお楽しみください:)

1
Minesh

このように入力フィールド内でrequiredを使用するだけです

<input type="text" class="form-control required" id="firstname" name="firstname" required/>
0
stephen carvalho