記事一覧

jQuery Validation Engine におけるボタン2度押し防止の対策方法 | asp.net


今回は asp.net において jQuery Validation Engine を使用したバリデータの使用方法及び、そのトリガーポイントの設定方法、並びにボタンを2度押しした場合の対策方法についてご紹介したいと思います。


前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降



1.JSファイルの設置

jQuery Validation Engine (Javascriptファイル)をダウンロードします。
NuGetパッケージからもインストールが可能ですので、そちらをお勧めします。

(1)Webプロジェクトを右クリックして「NuGetパッケージの管理」を選択します。

(2)参照のリンクボタンをクリックして、「jquery.validationengine」で検索します。

(3)あとは画面右のインストールボタンからインストールするとWebプロジェクトに配置されます。

jquery_validationengine_01.png


(4)デフォルトでは Scriptフォルダ内に jquery.validationEngine.js が配置されます。

jquery_validationengine_02.png



2.aspx の構成

バリデータの為の入力項目とボタンを配置します。
戻るボタンはバリデータの影響を受けない様に LinkButton で配置します。
OKボタンは バリデータで検証されるように submit ボタンである asp:button で配置します。
その他、必要なスタイルとJavascriptファイルを読み込むように設定します。

JVETest.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JVETest.aspx.vb" Inherits="JVETest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery Validation Engine Test</title>
    <link runat="server" href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="wrapper">
            <asp:Label ID="lblInput" runat="server" Text="入力項目" />
            <asp:TextBox ID="txtInput" runat="server" CssClass="validate[required]" />
        </div>
        <div class="wrapper">
            <asp:LinkButton ID="lnkReturn" runat="server" Text="戻る" CssClass="button enable"/>
            <asp:Button ID="btnConfirm" runat="server" Text="OK" CssClass="button enable"/>
        </div>
    </div>       
    </form>
    <script src="<%=Me.ResolveClientUrl("~/Scripts/jquery-1.10.2.js")%>"></script>
    <script src="<%=Me.ResolveClientUrl("~/Scripts/jquery.validationEngine.js")%>"></script>
    <script src="<%=Me.ResolveClientUrl("~/Scripts/jquery.validationEngine-en.js")%>"></script>
    <script src="<%=Me.ResolveClientUrl("~/Scripts/common.js")%>"></script>
</body>
</html>



3.Javascript の実装

jQuery.ValidationEngine のトリガーポイントを設定します。
また、ボタンを押下した際にバリデータのエラーが存在する場合はポストバックをキャンセルし、エラーが存在しない場合は、ボタンの2度押しを禁止するような動作をするスクリプトを実装します。

common.js
//jQueryValidationEngineのトリガー設定
$('#form1').validationEngine({
    promptPosition: 'bottomLeft',
    //validationEventTrigger: 'keyup' //キーアップ時にバリデータが動作します。
    //binded: false; //submitボタンを押下した場合のみバリデータが動作します。
focusFirstField: true, //エラー表示時に先頭の入力フィールドにフォーカスする
scroll: true //エラー箇所をスクロールして表示する
});

//OKボタンを押下した場合
$('#btnConfirm').click(function () {

    //バリデータのエラーの場合は2度押し対策しない
    if ($('#form1') != null &&
        $('#form1').validationEngine != null &&
        !$('#form1').validationEngine('validate')) {
        return false;
    }

    return detectDoubleClick(this);
});

//2度押し防止
var clickCount = 0;
function detectDoubleClick(button) {

    $(button).removeClass('enable');
    $(button).addClass('disable');

    clickCount++;
    if (clickCount == 1) {
        return true;
    }
    else {
        return false;
    }
}



4.CSS の設定

ボタンの基本的な設定に加えて、Enable時とDisable時の設定を追加します。

style.css
.wrapper {
    padding : 20px;
    margin : 20px;
}

.button {
    display : inline-block;
    padding : 20px 0px 20px 0px;
    margin : 20px 20px 20px 0px;
    font : bold 1em "MS Pゴシック";
    width : 150px;
    text-align : center;
    text-decoration: none;
    cursor : pointer;
    border: solid 1px #000000;
}

.enable {       
    background-color : purple;
    color : #FFFFFF;
}

.disable {    
    background-color : #808080;
    color : #FFFFFF;
}



5.VB の記述

特に変わったイベントはありませんが、ボタンを押下した際に画面遷移するようにします。これはバリデータが実行されて、ポストバックがキャンセルされたかどうかわかりやすい為です。

JVETest.aspx.vb
Partial Class JVETest
    Inherits System.Web.UI.Page

    Private Sub lnkReturn_Click(sender As Object, e As EventArgs) Handles lnkReturn.Click

        Response.Redirect("~/default.aspx")

    End Sub

    Private Sub btnConfirm_Click(sender As Object, e As EventArgs) Handles btnConfirm.Click

        Response.Redirect("~/default.aspx")

    End Sub

End Class
 



6.動作の確認

上記の実装ができましたら、動作を確認します。
以下の図のように入力項目に値を入力した場合と入力しない場合でOKボタンや戻るボタンを押下してみます。

(1)値を入力した場合、OKボタンを押下するとOKボタンをDisableにして画面遷移します。

(2)値を入力しなかった場合、OKボタンを押下するとOKボタンはEnableのまま、バリデータにより画面にエラーが表示されます。

(3)値の入力有無に関わらず、戻るボタンを押下して画面遷移をすることが可能です。

jquery_validationengine_03.png






最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。



関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。