Transmitmailとjquery validationの組み合わせ
バリデーションの表示
Transmitmailでフォームを作っています。
Transmitmailは、name属性を日本語にしないと正常に動きません。
しかし、jquery validationのエラーメッセージをカスタマイズするには、name属性を英語で設定する必要があります。
どうすれば両立できますか？
お手数ですがよろしくお願いします。
0
4Answer
別にTransmitMailのname属性を日本語にしなくてはいけないわけではない（予約語と重複しなければOK）ですし、jQuery Validationのエラーメッセージをカスタマイズするにもname属性を英語にする必要はないのですが、何かエラーなどが出ているでしょうか？
コードを掲載していただけるとピンポイントでアドバイスできると思います。
追記(9/12 11:00)
HTMLの掲載ありがとうございます。JavaScriptのコードはどうなっていますでしょうか。ありそうな誤解などを追記します。
TransmitMailのname属性について
tinyTemplate.phpを見ていただくと、{...}（tagと表現されています）の文字種の指定はありません。唯一、TransmitMail.phpでメールアドレスのname属性がデフォルトで'メールアドレス'となっていますが、phpを書き換えればname属性に全く日本語を使わずに済みます。
- https://github.com/dounokouno/TransmitMail/blob/master/lib/tinyTemplate.php
- https://github.com/dounokouno/TransmitMail/blob/master/lib/TransmitMail.php#L72
jQuery Validationについて（JavaScriptのオブジェクトリテラルについて）
DocumentationのExampleを拝借して説明します
引用
$("#myform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
上でのname, emailを下のようにそのまま日本語にしていませんか？
間違っている例
$("#myform").validate({
rules: {
名前: "required",
メールアドレス: {
required: true,
email: true
}
},
messages: {
名前: "Please specify your name",
メールアドレス: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
MDNを参照していただきたいのですが、JavaScriptのオブジェクトリテラルについて
オブジェクトのプロパティには空の文字列を含むあらゆる文字列が使えます。もしプロパティ名が JavaScript で有効な識別子か数値でなければ、引用符で囲む必要があります。
とあります。（識別子とは「変数にできる名前」と認識していれば十分だと思います。）
日本語（ひらがな・カタカナ・漢字など）は識別子になり得ないため、JavaScriptのプロパティのキー（jQuery Validationのname属性）の書き方としては
正しい例
$("#myform").validate({
rules: {
"名前": "required",
"メールアドレス": {
required: true,
email: true
}
},
messages: {
"名前": "Please specify your name",
"メールアドレス": {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
となります。（引用符は"・'どちらでも良いです。）
以上の説明で不足があればコメントいただければと思います。
1Like
Comments
@taka224
Questioner
大変ご丁寧な説明ありがとうございます。
tinyTemplate.phpのどこを書き換えれば良いのでしょうか？- tinyTemplate.phpは書き換える必要はないです。①TransmitMail.php、②JavaScriptのどちらかを書き換えればいいです。
上の「正しい例」のようにJavaScriptを修正したのであればphpの書き換えは不要です。
> 突然、jquery validateが動かなくなりました。
と言われましても、どのファイルのどの部分をどのように修正したのか（差分が）分かりませんし、せめてコンソール（開発者ツール）でどんなエラーが出ているのか教えていただかないと、全く判断できません。 @taka224
Questioner
ありがとうございます。
TransmitMailのどこを書き換えれば良いのでしょうか？
ありがとうございます。
特にエラーは出ていませんが、Transmitmailはname属性を日本語にしないと正常に動きません。jQuery Validationも日本語にすると、メッセージが表示しません。
<form method="post">
<input type="hidden" name="csrf_token" value="{$csrf_token}">
<dl>
<dt><label for="name">お問い合わせ詳細</label></dt>
<dd><textarea id="msg" name="お問い合わせ詳細" aria-required="true">{$お問い合わせ詳細}</textarea>
<input type="hidden" name="required[]" value="お問い合わせ詳細">
{if:$required.お問い合わせ詳細}
<em>{$required.お問い合わせ詳細}</em>
{/if:$required.お問い合わせ詳細}</dd>
</dl>
<dl>
<dt><label for="name">お名前・会社名</label></dt>
<dd> <input type="text" id="name" name="お名前・会社名" value="{$お名前・会社名}" aria-required="true">
<input type="hidden" name="required[]" value="お名前・会社名">
{if:$required.お名前・会社名}
<em>{$required.お名前・会社名}</em>
{/if:$required.お名前・会社名}</dd>
</dl>
<dl>
<dt><label for="name">返信先メールアドレス</label></dt>
<dd> <input type="email" id="email" name="メールアドレス" value="{$メールアドレス}" aria-required="true">
<input type="hidden" name="required[]" value="メールアドレス">
<input type="hidden" name="email[]" value="メールアドレス">
{if:$email.メールアドレス}
<em>{$email.メールアドレス}</em>
{/if:$email.メールアドレス}
{if:$required.メールアドレス}
<em>{$required.メールアドレス}</em>
{/if:$required.メールアドレス}</dd>
</dl>
{$hiddens}
<input type="hidden" name="page_name" value="finish" />
<button type="submit" value="送信">送信</button>
</form>
0Like
突然、jquery validateが動かなくなりました。
$('#form').validate({
errorElement: "em",
errorClass: "alert",
rules: {
"お問い合わせ詳細": {
required: true,
},
"お名前・会社名": {
required: true,
},
"メールアドレス": {
required: true,
email: true,
},
},
messages: {
"お問い合わせ詳細": {
required: 'お問い合わせ詳細を入力して下さい',
},
"お名前・会社名": {
required: 'お名前・会社名を入力して下さい',
},
"メールアドレス": {
required: 'メールアドレスを入力してください',
email: 'メールアドレスを正確に入力してください'
}
}
})
何か違うのでしょうか？
0Like
できました！
ありがとうございます。
0Like