ブートストラップスタイルでカスタム検証エラーを表示する

debugcn 投稿 Dev

Yegor Ivlev

ブーストラップのスタイルで入力エラーを表示したい。ブートストラップエラーしかし、このコードを使用すると

let $emailContainer = $('[data-coffee-role="email-container"]');
$emailContainer.validate().showErrors({'email':'Email already exists'});

私はこのようにエラーを表示します。この方法でエラーを表示するにはどうすればよいですか？

HTML

 <div class="card">
        <div class="card-body">
            <form data-coffee-order="coffee">
                <div class="form-group">
                    <label for="coffeeOrder">Coffee order</label>
                    <input id="coffeeOrder" type="text" class="form-control" name="coffee" autofocus required>
                </div>
                <div class="form-group" data-coffee-role="email-container">
                    <label for="email">Email</label>
                    <input id="email" type="email" class="form-control" name="email" placeholder="[email protected]" required>
                </div>
                <button type="submit" class="btn btn-outline-secondary">Submit</button>
                <button type="reset" class="btn btn-outline-secondary">Reset</button>
            </form>
        </div>
    </div>

 FormHandler.prototype.addHandler = function(fn, check){
        this.$formElement.on('submit', function (event) {
            event.preventDefault();
            const data = {};
            $(this).serializeArray().forEach(item => data[item.name] = item.value);
            if(check(data.email)){
                let $emailContainer = $('[data-coffee-role="email-container"]');
                $emailContainer.validate().showErrors({'email':'Email already exists'});
                return;
            }
            fn(data);
        })
    }

S.オリオリ

使用している外部ライブラリを台無しにしたと思います。探している動作は単純なHTMLフォーム検証であり、を使用しなくても達成できますboostrap。

メッセージのグラフィカルな側面は、使用しているブラウザによって異なります。

デフォルトのメッセージテキストを拡張したり、カスタムバリデーターを作成したりする場合は、このページが役立ちます。

この簡単な例を確認してください。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
        <h1>Form validation demo</h1>
    </div>
    <form class="form">
    <div class="container">
        <div class="row">
            <div class='col-sm-4 form-group'>
                <label for="name">First Name:</label>
                <input id="fname" class="form-control" type="text" required>
            </div>
            <div class='col-sm-4 form-group'>
                <label for="name">Last Name:</label>
                <input id="lname" class="form-control" min="3" required>
            </div>
            <div class='col-sm-4 form-group'>
                <label for="name">Email address:</label>
                <input id="email" class="form-control" type="email" required>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <button type="submit" class="btn btn-success btn-block">Submit</button>
            </div>
        </div>
    </div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]