Skip to main content
本文から 9 文字削除
ソース リンク
int32_t
  • 8,734
  • 1
  • 11
  • 14
  • type="button" でエラーを出したい

Google ChromeとOperaなど reportValidity() に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。

<form action=...>
  <input type="button" value="送信するかも検証" onclick="this.form.reportValidity()">

reportValidity() が使えない場合、自分のコードでエラーメッセージを出す必要があります。

<form action=...>
<input type="button" value="送信しないかも検証" onclick="report(this.form)">
<script>
function report(form) {
  if (form.sampleName.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(form.sampleName.validationMessage + form.sampleName.title);
  form.sampleName.focus();
}
</script>
  • 入れた瞬間にエラーメッセージ

上記と同様のことを input イベントハンドラで実行すればよいかと思います。
reprotValidity() がない場合の例:

<form action=...>
<input name="sampleName" oninput="report(this)" ...>
<script>
function report(input) {
  if (input.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(input.validationMessage + input.title);
  input.focus();
}
</script>
  • type="button" でエラーを出したい

Google ChromeとOperaなど reportValidity() に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。

<form action=...>
  <input type="button" value="送信するかも" onclick="this.form.reportValidity()">

reportValidity() が使えない場合、自分のコードでエラーメッセージを出す必要があります。

<form action=...>
<input type="button" value="送信しないかも" onclick="report(this.form)">
<script>
function report(form) {
  if (form.sampleName.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(form.sampleName.validationMessage + form.sampleName.title);
  form.sampleName.focus();
}
</script>
  • 入れた瞬間にエラーメッセージ

上記と同様のことを input イベントハンドラで実行すればよいかと思います。
reprotValidity() がない場合の例:

<form action=...>
<input name="sampleName" oninput="report(this)" ...>
<script>
function report(input) {
  if (input.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(input.validationMessage + input.title);
  input.focus();
}
</script>
  • type="button" でエラーを出したい

Google ChromeとOperaなど reportValidity() に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。

<form action=...>
  <input type="button" value="検証" onclick="this.form.reportValidity()">

reportValidity() が使えない場合、自分のコードでエラーメッセージを出す必要があります。

<form action=...>
<input type="button" value="検証" onclick="report(this.form)">
<script>
function report(form) {
  if (form.sampleName.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(form.sampleName.validationMessage + form.sampleName.title);
  form.sampleName.focus();
}
</script>
  • 入れた瞬間にエラーメッセージ

上記と同様のことを input イベントハンドラで実行すればよいかと思います。
reprotValidity() がない場合の例:

<form action=...>
<input name="sampleName" oninput="report(this)" ...>
<script>
function report(input) {
  if (input.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(input.validationMessage + input.title);
  input.focus();
}
</script>
ソース リンク
int32_t
  • 8,734
  • 1
  • 11
  • 14

  • type="button" でエラーを出したい

Google ChromeとOperaなど reportValidity() に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。

<form action=...>
  <input type="button" value="送信するかも" onclick="this.form.reportValidity()">

reportValidity() が使えない場合、自分のコードでエラーメッセージを出す必要があります。

<form action=...>
<input type="button" value="送信しないかも" onclick="report(this.form)">
<script>
function report(form) {
  if (form.sampleName.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(form.sampleName.validationMessage + form.sampleName.title);
  form.sampleName.focus();
}
</script>
  • 入れた瞬間にエラーメッセージ

上記と同様のことを input イベントハンドラで実行すればよいかと思います。
reprotValidity() がない場合の例:

<form action=...>
<input name="sampleName" oninput="report(this)" ...>
<script>
function report(input) {
  if (input.validity.valid)
    return;
  // alert()は良いUIではないので実際はもっと良い方法で表示すべき。
  alert(input.validationMessage + input.title);
  input.focus();
}
</script>