Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@kazuki5555

超初心者が学ぶ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月に未経験からデビューしたエンジニアなので、間違いや誤った解釈は多々あると思います。もしそのような点を発見されたらぜひ一言修正いただけますと大変助かります。

19
Help us understand the problem. What is going on with this article?
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
kazuki5555
PHPとかLaravelとかDockerとかGCPとか PythonかじったりGoかじったり
cgate
クリーンなアドテクノロジーを目指して、安心して利用いただけるサービスを!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?