Help us understand the problem. What is going on with this article?

超初心者が学ぶJavaScriptとreturn falseによる中断処理

More than 1 year has passed since last update.

はじめに

久しぶりのQiita投稿になります。2018文系卒未経験エンジニアです。最近は本格的に業務に携わるようになり、以前のようにPHPだけを触っていれば良いというわけにもいかなくなりました。
今回はJavaScript、ならびにVie.jsを勉強したのでそのメモ。

実装した処理

複数のIDを入力できるフォームの送信ボタンが押された際に、半角数字以外が入力されていた場合にエラー処理を出すというものです。
当初はこのようにしていました。

<input type="submit" class="btn" value="検索" v-on:click="check()">

~~

check: function() {
            var ad_group_id = this.adGroupId;
            var ad_group_ids = ad_group_id.split(/\r\n|\r|\n/);
            for (var i = 0; i < ad_group_ids.length; i++) {
                var pattern = /^\d*$/
                if (pattern.test(ad_group_ids[i]) == false) {
                    alert("半角数字を入力してください。");
                    return false;
                }
            }
            document.searchForm.submit();
        }


しかし、正規表現のチェック後アラートは出るものの、そのまま送信されてしまっていました。

正しく動くコードは以下です。

<input type="submit" class="btn" value="検索" onclick="return false" v-on:click="check()">

~~

check: function() {
            var ad_group_id = this.adGroupId;
            var ad_group_ids = ad_group_id.split(/\r\n|\r|\n/);
            for (var i = 0; i < ad_group_ids.length; i++) {
                var pattern = /^\d*$/
                if (pattern.test(ad_group_ids[i]) == false) {
                    alert("半角数字を入力してください。");
                    return false;
                }
            }
            document.searchForm.submit();
        }


inputタグ内にonclickの記述を追加しました。
onclick="return false"は一言で言うと処理を止めるための記述だそうです。
なので流れは、if文の中を通ったらアラート→return false(js内の)でjsの処理ストップ。その結果処理がストップしたままでいてくれるそう。
逆に中を通らなかった場合は、一度処理がストップした後にsubmitのフォームを呼び出しているので結果的に送信は行えるとのこと。

感じたこと

  • onclickでreturn falseを記述しないと処理が走ってしまう
  • jsのonclickとvue.jsのv-on:clickは共存できる(?)
  • JavaScript勉強しなければなあ

最後に

まだ4月に未経験からデビューしたエンジニアなので、間違いや誤った解釈は多々あると思います。もしそのような点を発見されたらぜひ一言修正いただけますと大変助かります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした