validationを使った配列要素の存在チェックの方法

前提・実現したいこと

フォームより入力された文字列が、あらかじめ定義された配列の要素として存在するかチェックするﾌﾟﾛｸﾞﾗﾑを作っています。
存在すれば、確認画面へ飛び、存在しなければ、エラーメッセージを表示するというものです。

発生している問題・エラーメッセージ

該当のソースコードですとエラーメッセージが表示されません。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" charset="utf-8">
</head>

<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_ja.min.js"></script>
<script src="http://js/init.js" type="text/javascript" charset="utf-8"></script>
    
<body>
<div>
    <p>
        <input type="text" name="name" class="name">
    </p>
    <p>
        <input type="submit" class="submit" value="Submit">
    </p>
</div>
</body>
    
<script type="text/javascript">
        
function existCheck(){
    
    
    //入力フォームより入力された企業名
    var name="";

    //登録された企業を配列に格納
    var nameArr = ["ABC㈱","㈱DEF","GHI工業","JKL製作所"];
    
    //入力した値が存在するかチェック
    var sch = nameArr.indexOf(name);//配列に存在しない値であれば-1を返す
    
    //
    $(function(){
        $jQuery.validator.addMethod('my_rule',function(sch,element){
            if(this.optional(element)){
               return true;
            }
            if(sch == -1){
               return false;
            }
               return true;
        },'存在しません。');
    
    $("#form1").validate({
        rules: {
            name: {
                ruquired: true,
                my_rule: true
            }
        }
    　});
  }
}
      
</script>
</html>

試したこと

html/jQuery/javascript
1【validation雛形】
2
3$(function() {
4  
5    $.validator.addMethod('my_rule', function(value, element) {
6
7        if ( this.optional( element ) ) {
8            return true;
9        }
10        if (value == '石橋') {
11            return false;
12        }
13        return true;
14    }, '存在しません');
15    $("#commentForm").validate({
16        rules: {
17            name: {
18                required: true,
19                my_rule: true
20            }
21        }
22    });
23},jQuery)
24

補足情報（FW/ツールのバージョンなど）

実行時環境
google web maker

m.ts10806

2019/10/15 03:51

本当に下記のようにリンクさせてるのですか？ http://js/init.js

uj3000

2019/10/15 04:18

m.ts10806様 >本当に下記のようにリンクさせてるのですか？ >http://js/init.js すみません。おっしゃっている意味がよくわかりません。

m.ts10806

2019/10/15 04:26

ご自身が提示されたコードの下記です。 <script src="http://js/init.js" type="text/javascript" charset="utf-8"></script>

行動規範の内容に同意します

回答2件

存在するかどうかでチェックをするときは普通は

セレクトボックス
ラジオボタン

のどちらかをUIにします

どうしてもテキストボックスでユーザーに入力させたいならpatternを利用下さい

HTML
1<form>
2<input type="text" name="hoge" pattern="abc|def|ghi" required>
3<input type="submit" value="send">
4</form>

投稿2019/10/15 03:54

編集2019/10/15 03:56

yambejp

総合スコア114839

uj3000

2019/10/15 06:07 編集

ご回答ありがとうございます。 patternですが、吹き出しのメッセージを編集することは可能でしょうか。

行動規範の内容に同意します

入力前にチェックすることはできないので .addMethod() で渡した function 内でチェックするようにしてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://jqueryvalidation.org/jQuery.validator.addMethod/

JavaScript
1        //if (value == '石橋') {
2        if (nameArr.indexOf(value) < 0) {
3            return false;
4        }

投稿2019/10/16 03:15

x_x

総合スコア13749

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！