web-dev-qa-db-ja.com

送信ボタンがフォームの外にあるときにBootstrap 3フォーム検証を使用するにはどうすればよいですか？

Bootstrap 3フォーム検証の実装と混同しています。Bootstrapは初めてです。送信ボタンを含まないフォームでフォーム検証を機能させることができません。私が探しているフォーム検証のタイプは、次のコードで確認できます。

http://jsfiddle.net/hTPY7/1107/

<form>
    <div class="form-group">
        <label class="control-label" for="username">Email:</label>
        <div class="input-group">
            <input class="form-control" placeholder="Email" name="email" type="email" required />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
            <input class="form-control" type="password" placeholder="Password" name="lastname" type="text" required />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

以下のコードのようなJQueryを使用してフォームを送信できることはわかっていますが、Bootstrap 3検証をどのように使用できますか？

$( "#createUserSubmit" ).click(function() {
  $( "#newUserForm" ).submit();
});

私は何年もStackoverflowを読んでいますが、これは私の最初の投稿です。私は答えを探しましたが、見つけることができるのは他の検証ライブラリを使用するソリューションだけです。 Bootstrap独自の組み込み関数を使用したいと思います。

ありがとう！

javascriptjqueryformsvalidationtwitter-bootstrap-3
7
Veita

私はいくつかの調査を行いましたが、私が目にしたフォーム検証はBootstrapの関数ではなく、新しいCSS3/HTML5機能ではありませんでした。 JS）送信ボタンがフォーム内に含まれていない限り、このフォーム検証を実行します。これが機能しなかった例です。

http://jsfiddle.net/hTPY7/1112/

修正方法の例を次に示します。

http://jsfiddle.net/hTPY7/1113/

<form>要素は、フォームだけでなく、Bootstrap modal divsも囲む必要があります。

ここに私の問題をうまくまとめた別の投稿があります：

AJAX button submit のHTML5フォーム検証

8
Veita

検証ルールを追加するには、ある種の外部ライブラリまたはカスタムコードを使用する必要があります。これにより、検証クラスをフォームに追加できます。他の方法はないと思います。

例：

http://jsfiddle.net/mapb_1990/hTPY7/9/

HTML：

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

JS：

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
5
aamir sajjad

HTML5を受け入れ、フォームの検証を行うと、非常にシンプルになります（JavaScriptは必要ありません）。

<form id="my-awesome-form">
    ...
</form>
...
<button type="submit" form="my-awesome-form">Submit</button>

ソース： https://www.w3schools.com/tags/att_button_form.asp

カバレッジはかなりまともです： https://caniuse.com/#feat=form-attribute

0
Multihunter