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

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

質問する

ただいまの
回答率

90.36%

  • JavaScript

    18718questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    8245questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET MVC Framework

    90questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

  • Entity Framework

    51questions

3桁コンマ区切り数字をコンマ無しでFrom送信したい

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 198
jiriyama

jiriyama

score 1

前提・実現したいこと

JavaScriptを利用して、Html.TextBoxForに"1,234,567"のように3桁コンマ区切り表示したでデータを、クライアントサイドの検証にひっかからずにForm送信し、データベースのDecimal型のデータを更新できるようにしたいです。submit時にJavaScriptでコンマ無し数値に変更すればよいように思いますが、具体的なソースコードが思い浮かばず困っております。
どうぞよろしくお願いいたします。

環境

Windows10
VS2017（Visual Studio 2017 Community version 15.9.4）
(SQLServer: MSSQLLOCALDB)
Asp.Net MVC で開発

事象詳細

VSからWebアプリを実行し、Chromeにアプリが開きます。
そして、データベースに保存済の情報がブラウザに表示されます。
（データ”Price”はdecimal型でデータベースに保存されています。）
Priceのデータが3桁区切り数値（例：1,234,567）と表示されます。
Form送信するために保存ボタンを押すと、検証にひっかかり、Form送信できません。

3桁コンマ区切り表示を実現するためのJavaScriptは、下記サイトを参考に実装しました。
https://webllica.com/add-comma-as-thousands-separator/

これにより、Html.TextBoxFor で、編集時（Focus時）は"1234567"のようにコンマ無しで入力し、表示時（Blur時）は"1,234,567"のように3桁コンマ区切り表示できるようになったのですが、submitでForm送信するとクライアントサイドの検証により、「値'1,234,567'はPriceに対して無効です」とエラーになりFrom送信できません。

ソースコード

//Model: Part.cs
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace Contract.Models
{
    public class Part
    {
        public int ID { get; set; }

        [StringLength(50)]
        public string Name { get; set; }

        [Column("money")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }
    }
}
//Model: PartContext.cs
using System.Data.Entity;

namespace Contract.Models
{
    public class PartContext : DbContext
    {
        public PartContext() : base("PartContext")
        {
        }
        public DbSet<Part> Parts { get; set; }
    }
}
//App_Start: BundleCOnfig.cs
using System.Web.Optimization;

namespace Contract
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
        }
    }
}
//Controllers: PartController.cs
using Contract.Models;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;

namespace Contract.Controllers
{
    public class PartController : Controller
    {
        private PartContext db = new PartContext();

        // GET: Part
        public ActionResult Index()
        {
            return View(db.Parts.ToList());
        }


        // GET: Part/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Part part = db.Parts.Find(id);
            if (part == null)
            {
                return HttpNotFound();
            }
            return View(part);
        }

        // POST: Part/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,Name,Price")] Part part)
        {
            if (ModelState.IsValid)
            {
                db.Entry(part).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(part);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}
//View:Shared: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryval")
    @RenderSection("scripts", required: false)
    <script src="~/Scripts/myScript.js?timestamp=@DateTime.Now.Ticks.ToString()"></script>
</body>
</html>
//View: Index.cshtml
@model IEnumerable<Contract.Models.Part>
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.Price)</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
            <td>@Html.DisplayFor(modelItem => item.Price)</td>
            <td>@Html.ActionLink("Edit", "Edit", new { id = item.ID })</td>
        </tr>
    }
</table>
//View:Edit.cshtml
@model Contract.Models.Part
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="form-horizontal">
        @Html.HiddenFor(model => model.ID)

        <div class="form-group">
            Name
            <div>
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name, "")
            </div>
            Price
            <div>
                @Html.EditorFor(model => model.Price, "{0:F0}")
                @Html.ValidationMessageFor(model => model.Price, "数値にしてください", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div>
                <input type="submit" value="保存" formmethod="post"/>
            </div>
        </div>
    </div>
}
//出典：　https://webllica.com/add-comma-as-thousands-separator/
//**** 画面表示完了後に、契約金額の表示をコンマ区切りとする ****
window.onload = function () {
    elm.value = addFigure(document.getElementById("Price").value);
};

// * 数値の3桁カンマ区切り
// * 入力値をカンマ区切りにして返却
// * [引数]   numVal: 入力数値
// * [返却値] String(): カンマ区切りされた文字列
// */
function addFigure(numVal) {
    // 空の場合そのまま返却
    if (numVal === '') {
        return '';
    }
    // 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
    numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
    // 数値でなければそのまま返却
    if (!/^[+|-]?(\d*)(\.\d+)?$/.test(numVal)) {
        return numVal;
    }
    // 整数部分と小数部分に分割
    var numData = numVal.toString().split('.');
    // 整数部分を3桁カンマ区切りへ
    numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 小数部分と結合して返却
    return numData.join('.');
}

///**
// * カンマ外し
// * 入力値のカンマを取り除いて返却
// * [引数]   strVal: 半角でカンマ区切りされた数値
// * [返却値] String(): カンマを削除した数値
// */
function delFigure(strVal) {
    return strVal.replace(/,/g, "");
}

///**
// * 全角から半角への変換関数
// * 入力値の英数記号を半角変換して返却
// * [引数]   strVal: 入力値
// * [返却値] String(): 半角変換された文字列
// */
function toHalfWidth(strVal) {
    // 半角変換
    var halfVal = strVal.replace(/[！-～]/g,
        function (tmpStr) {
            // 文字コードをシフト
            return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
        });
    return halfVal;
}

///**
// * 処理を適用するテキストボックスへのイベント設定
// * Blur : カンマ区切り処理実施
// * Focus : カンマ削除処理実施
// */
var elm = document.getElementById('Price');

elm.addEventListener('blur',
    function () {
        this.value = addFigure(this.value);
    }, false);

elm.addEventListener('focus',
    function () {
        this.value = delFigure(this.value);
    }, false);

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert16 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    SurferOnWww

    2019/02/10 16:49

    すみません、ちょっと用事ができたので 2 ～ 3 時間お待ちいただければと思います。

    キャンセル

  • jiriyama

    jiriyama

    2019/02/10 16:52

    とんでもありません。お気を付けて。

    キャンセル

  • SurferOnWww

    SurferOnWww

    2019/02/10 19:37

    質問者さんが質問にアップされたスクリプトと、shinji709 さんがアップされたコードの this を elm に変更したスクリプトを使って、さらに先に自分の環境で検証に使ったコードに入力できる金額の範囲などを検証するデータアノテーション属性を追加して検証してみました。

    結果、独自に追加したスクリプトと ASP.NET MVC の検証用スクリプトがバッティングすることなくクライアント側での検証は期待通り動きました。（さらなる検証は必要だと思いますが基本的な動きは OK でした）

    やはり、先入観を持たず、諦めない心で試してみるのが大切ですね。勉強になりました。ご参考に検証に使ったコードを回答欄にアップしておきます。

    キャンセル

回答 2 件

link

checkベストアンサー

+3

わんくま掲示板 http://bbs.wankuma.com/index.cgi?mode=al2&namber=90016 の回答とダブりますし、質問に対する直接の回答ではありませんが、わんくま掲示板の経緯をご存じない回答者・閲覧者の方への情報も含めてレスを書いておきます。

わんくま掲示板では、

ASP.NET MVC アプリで、ユーザーがテキストボックスに、例えば 1000 と入力すると \1,000 に書き換えるスクリプトを実装した。しかし、それを送信しようとすると数字として不正な文字が含まれているので ASP.NET MVC に実装されているクライアント側での検証に引っかかって送信できない。だから、送信する前にテキストボックスの値を \1,000 から 1000 に書き戻したい。

・・・という話でした。

上記の「送信する前にテキストボックスの値を \1,000 から 1000 に書き換えるにはどうすれば良いか」がこのスレッドの質問と理解しています。

問題は、それが実装できたとしても、ASP.NET MVC による検証は依然として回避できない（\1,000 から 1000 に書き換える前に ASP.NET MVC に実装されているクライアントサイドでの検証がかかってしまう）可能性が高いということです。（onchange で検証がかかるはずなので）

質問者さんが諦めない心でとにかく何でもトライしてみるのは良いとは思いますが、そのあたりの事情は回答者・閲覧者の方も知っておいた方がよさそうです。

回避できない場合は、\1,000 1000 から 1000 \1,000 に書き換えのために追加したスクリプトの動作と（1000 と \1,000 が逆でした。訂正します）、ASP.NET MVC の検証用のスクリプトの動作に整合が取れるように、どちらかもしくは両方を書き直して対応できないかを検討するという話になると思います。

でも、書き直すことで対処できるかどうかは分かりません。そもそも、検討するにしても、1,600 行を超える ASP.NET MVC のスクリプトを調べて、好ましからざる副作用が出ないよう完璧に書き直すのは現実的ではないと思われます。時間の無駄に終わるかもしれませんし。

その方向に進むのが難しいまたは現実的ではないと判断されたら、以下のどちらかに進むしかなさそうに思います。

(1) 1000 に書き戻してもクライアント側の検証に引っかかるなら、クライアント側での検証を無効にする。（価格以外の入力もあるでしょうからクライアント側での検証を無効にしてしまうのは問題かもしれませんが）

(2) Model のプロパティを decimal 型ではなく string 型とし、検証はデータアノテーション属性を付与して正規表現で行なう。(DB のフィールドの型が money 型のようですので、サーバー側での取り扱いを考えると難しいかもしれませんが）

自分が考えるとすると (2) かなぁ・・・という感じです。

【追記】

上の質問に対する 2019/02/10 19:37 の私のコメントで「ご参考に検証に使ったコードを回答欄にアップしておきます」書きましたが、それを以下に書いておきます。

先に自分が自分の環境で検証したコードに加えて、入力できる金額の範囲などを検証するデータアノテーション属性を追加し、質問者さんが質問にアップされたスクリプトと、shinji709 さんがアップされたコードの this を elm に変更したスクリプトを追加したものです。

結果、独自に追加したスクリプトと ASP.NET MVC の検証用スクリプトがバッティングすることなくクライアント側での検証は期待通り動きました。（さらなる検証は必要だと思いますが基本的な動きは OK でした ← 下の 2019/02/11 10:15 の私のコメントを見てください）

変な先入観を持たず、諦めない心で何でもやってみるというのは大切なのだと今さらながら思い出し、自分としても勉強になりました。

不明点があれば質問してください。

Model 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Globalization;

namespace Mvc5App2.Models
{
    public class PurchaseRecord
    {
        [Display(Name = "ID")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d{1,5}$", ErrorMessage = "数字 1 ～ 5 文字")]
        public int ID { get; set; }

        [Display(Name = "契約日")]
        [Required(ErrorMessage = "{0} は必須")]
        [RegularExpression(@"^\d{4}/\d{2}/\d{2}( \d{1,2}:\d{2}:\d{2})?$",
            ErrorMessage = "yyyy/MM/dd 形式")]
        [DisplayFormat(DataFormatString = "{0:yyyy年M月d日}")]
        public DateTime ContractDate { get; set; }

        [Display(Name = "価格")]
        [Required(ErrorMessage = "{0} は必須")]
        // RegularExpression がないと 1x というような文字列を入力すると "The field 価格 must be a number." 
        // という data-val-number 属性に設定されたエラーメッセージが出る。
        [RegularExpression(@"^\d{1,6}$", ErrorMessage = "数字 1 ～ 6 文字")]
        [Range(100, 10000, ErrorMessage = "{0}は{1}～{2}の間で入力してください。")]
        [DisplayFormat(DataFormatString = "{0:N0}", ApplyFormatInEditMode = true)]
        public decimal Price { get; set; }
    }
}

View 

@model Mvc5App2.Models.PurchaseRecord

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>PurchaseRecord</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.ID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContractDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.EditorFor(model => model.ContractDate, new { htmlAttributes = new { @class = "form-control" } })*@
                @Html.TextBoxFor(model => model.ContractDate, "{0:yyyy/MM/dd}", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ContractDate, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        //<![CDATA[

        // これは shinji709 さんのコードの this を elm に変更
        var form = document.getElementsByTagName('form')[0]
        form.addEventListener('submit',
            function () {
                elm.value = delFigure(elm.value);
            }, false);


        // ここから下は質問者さんのコードをそのままコピペ

        //出典：　https://webllica.com/add-comma-as-thousands-separator/
        //**** 画面表示完了後に、契約金額の表示をコンマ区切りとする ****
        window.onload = function () {
            elm.value = addFigure(document.getElementById("Price").value);
        };

        // * 数値の3桁カンマ区切り
        // * 入力値をカンマ区切りにして返却
        // * [引数]   numVal: 入力数値
        // * [返却値] String(): カンマ区切りされた文字列
        // */
        function addFigure(numVal) {
            // 空の場合そのまま返却
            if (numVal === '') {
                return '';
            }
            // 全角から半角へ変換し、既にカンマが入力されていたら事前に削除
            numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
            // 数値でなければそのまま返却
            if (!/^[+|-]?(\d*)(\.\d+)?$/.test(numVal)) {
                return numVal;
            }
            // 整数部分と小数部分に分割
            var numData = numVal.toString().split('.');
            // 整数部分を3桁カンマ区切りへ
            numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            // 小数部分と結合して返却
            return numData.join('.');
        }

        ///**
        // * カンマ外し
        // * 入力値のカンマを取り除いて返却
        // * [引数]   strVal: 半角でカンマ区切りされた数値
        // * [返却値] String(): カンマを削除した数値
        // */
        function delFigure(strVal) {
            return strVal.replace(/,/g, "");
        }

        ///**
        // * 全角から半角への変換関数
        // * 入力値の英数記号を半角変換して返却
        // * [引数]   strVal: 入力値
        // * [返却値] String(): 半角変換された文字列
        // */
        function toHalfWidth(strVal) {
            // 半角変換
            var halfVal = strVal.replace(/[！-～]/g,
                function (tmpStr) {
                    // 文字コードをシフト
                    return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
                });
            return halfVal;
        }

        ///**
        // * 処理を適用するテキストボックスへのイベント設定
        // * Blur : カンマ区切り処理実施
        // * Focus : カンマ削除処理実施
        // */
        var elm = document.getElementById('Price');

        elm.addEventListener('blur',
            function () {
                this.value = addFigure(this.value);
            }, false);

        elm.addEventListener('focus',
            function () {
                this.value = delFigure(this.value);
            }, false);
        //]]>
    </script>
}

Controller 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Mvc5App2.Models;

namespace Mvc5App2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Edit()
        {
            PurchaseRecord model = new PurchaseRecord
            {
                ID = 1,
                ContractDate = DateTime.Now,
                Price = 1234m
            };

            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(PurchaseRecord model)
        {
            if (ModelState.IsValid)
            {
                // DB の編集処理
                return RedirectToAction("Index");
            }

            return View(model);
        }
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/10 19:51

    SurferOnWwww様
    初心者の私に丁寧に粘り強くご対応頂きましたこと、誠にありがとうございました。
    解決とさせていただきます。

    キャンセル

  • 2019/02/10 20:16

    コードも確認できました。ありがとうございました。

    キャンセル

  • 2019/02/11 10:15 編集

    かなり微妙なとこるで動いていますので、上にも書きましたがさらなる検証は必要だと思います。

    微妙なというのはどういうことかと言うと、上のコードの例では：

    (1) テキストボックスの初期表示は 1,234 ⇒ (2) ユーザーが編集動作に入る時 focus イベントが発生しスクリプトで 1234 に書き換わる ⇒ (3) ユーザーが例えば 3210 というように編集 ⇒ (4) 次の作業に移るためフォーカスを外す ⇒ (5) change イベントが発生し検証がかかる ⇒ (6) blur イベントが発生しスクリプトで 3,210 に書き換える ⇒ (7) ユーザーが送信ボタンをクリック ⇒ (3) submit イベントが発生しスクリプトで 3.210 を 3210 に書き換える ⇒ (8) サーバーで 3210 を受信、サーバー側での検証 OK となる。

    ・・・という動きになっていて、ブラウザ依存のスクリプトに頼っている部分が多いということです。

    問題として思いつくのは：

    ■ (5) ⇒ (6) の順序でイベントが発生しなければならないが、全てのブラウザでそうかは不明。（今のメジャーなブラウザは大丈夫のようですが、昔の Forefox は反対だったという話があります）

    ■ (3) でユーザーが数字だけ入力してくれると期待するのは無理がある。（上のサンプルでは RegularExpression 属性を追加してチェックするようにしてますが、それで十分か？）

    ■ ユーザーがブラウザの JavaScript を無効にした場合はサーバー側だけで検証することになる。

    ・・・などです。

    なので、実際に運用に使う場合は事前に十分確認したいただくようお願いします。不特定多数のユーザーが不特定多種のブラウザでアクセスしてくるインターネットに公開してような場合は特に。

    キャンセル

  • 2019/02/11 10:23

    SurferOnWww様
    ありがとうございます。ご懸念の点、理解できました。
    ド素人への厚いサポート深謝致します。
    今後とも精進に努めますので、宜しくお願い致します。

    キャンセル

link

+1

こうですかね？ 

var form = document.getElementsByTagName('form')[0]
form.addEventListener('submit',
    function () {
        this.value = delFigure(this.value);
    }, false);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/10 04:26 編集

    shinji709様　ありがとうございます。
    下記の通りやってみましたが、変わらず検証にかかってしまいます。
    追加のコメントがございましたらアドバイスよろしくお願いいたします。
    SurfOnWww様のコメントにございますように、ASP.NET MVCのデフォルトでの検証が先にかかるのを回避できない状況が続いているようです。＞
    (＞onchange で検証がかかる　ということなのでしょうね・・・）
    SurferOnWww様の案で、検証はやはり欲しいので(1)は避けたく、金額なのでDecimalにしたいですし（Stringなら精度関係ないか？）、入力桁を間違えないように3桁区切りは欲しいですし・・・悩みます

    ### 実施したこと
    myScript.js の最後にご提案のコードを追記。
    _Layout.cshtml に一番先にmyScript.jsを追記（一番先に実行されると考えた）
    実行した結果、やはりプロセス順が（ChromeデバッガのNetworkで確認したところ）
    HTML→modernizr.js→jquery.js→jquery.validate.jp→jquery.validate.unobtrusive.js
    →myScript.js →SupportLanguageList.json
    となり、検証に先にかかっているように見えます。
    >何度か実行し直したところ、先にmyScript.jsが実行開始されているケースも確認できましたが、やはり検証が回避できていません。。。開始が早くても完了は最後までかかっている・・・

    ```JavaScript
    //Scripts:myScript.js
    ・・・
    var form = document.getElementsByTagName('form')[0]
    form.addEventListener('submit',
    function () {
    this.value = delFigure(this.value);
    }, false);
    ```
    ```C#
    //View:Shared: _Layout.cshtml
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
    <div class="container body-content">
    @RenderBody()
    </div>

    <script src="~/Scripts/myScript.js?timestamp=@DateTime.Now.Ticks.ToString()"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @RenderSection("scripts", required: false)
    </body>
    </html>
    ```

    キャンセル

  • 2019/02/10 13:59

    jinji709様　SurfOnWwww様

    お世話になっております。
    なんと、ご提案いただいたJavaScriptを下記のようにしたら、検証にかからずにForm送信できるようになりました。
    ただ、汎用性がなくなってしまいました。
    汎用性をもたせるために、thisのままで対応できるようになりませんでしょうか？
    お忙しいところ恐縮ですが、引き続きアドバイスを頂けないでしょうか？

    ```JavaScript
    //Scripts:myScript.js（変更前）
    ・・・
    var form = document.getElementsByTagName('form')[0]
    form.addEventListener('submit',
    function () {
    this.value = delFigure(this.value);
    }, false);
    ```
    ```JavaScript
    //Scripts:myScript.js（変更後）
    ・・・
    var form = document.getElementsByTagName('form')[0];
    form.addEventListener('submit',
    function () {
    document.getElementById('Price').value = delFigure(document.getElementById('Price').value);
    }, false);
    ```

    キャンセル

  • 2019/02/10 15:16

    上の質問の 2019/02/10 15:10 の私のコメントに書きましたが、質問者さんのコードでは、そもそもクライアント側での検証は行われていなかったようです。なので、たぶん、「変更前」も「変更後」もサーバーへの送信はできていたが、「変更前」では当該文字列のカンマ , が除去できていなかったという話ではないかと思われます。確認してください。

    キャンセル

  • 2019/02/10 15:28

    これは失礼しました。formのvalueに代入してどうすんだ…
    出先で確認できませんがthis.querySelector('#Price').value使えませんか？

    キャンセル

  • 2019/02/10 16:36 編集

    shinji709様
    ありがとうございます。
    実際のアプリではひとつの画面で複数の価格情報があるので、汎用的なもので複数同時にコンマなし処理できないかと考える次第です。
    クラス名だとよさそうですね。やってみます。

    キャンセル

  • 2019/02/10 18:14

    じゃあjQueryなら
    $(this).find('.hoge').each(function() {
    $(this).val($(this).val());
    //またはthis.value = delFigure(this.value);
    });
    ES2015以降なら
    [...this.querySelectorAll('.hoge')].forEach(el => {
    el.value = delFigure(el.value);
    });
    とかですかねぇ。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    18718questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    8245questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET MVC Framework

    90questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

  • Entity Framework

    51questions

SNSアカウントでログイン

  • Facebookでログイン
  • Twitterでログイン
  • Googleでログイン
  • Githubでログイン
  • Hatenaでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る