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

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

新規登録して質問してみよう
ただいま回答率
85.35%
バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1923閲覧

React フォームのバリデーションを実装したい

CHAN_

総合スコア3

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/12/20 13:59

前提・実現したいこと

ReactでTodoアプリを作成しています。
フォームに50文字以上入力されたら「50文字を超えています」というエラーメッセージを表示させたいです。

発生している問題・エラーメッセージ

1つ目のフォームに50文字以上入力した時、「50文字を超えています」のメッセージが表示されるのですが、2つ目のフォームに入力すると表示されたメッセージが消えてしまいます。
この問題を解消したいです。

該当のコードは下記になります。

ご教示頂けますと幸いです。宜しくお願い致します。

該当のソースコード

react

1import axios from "axios"; 2import React from "react"; 3import TextField from '@material-ui/core/TextField'; 4import Button from '@material-ui/core/Button'; 5 6class Form extends React.Component { 7 constructor(props) { 8 super(props); 9 10 this.state = { 11 list_one: "", 12 list_two: "", 13 list_three: "", 14 message:{ 15 one: '', 16 two: '', 17 three: '', 18 } 19 }; 20 } 21 22 handleChange = (e) => { 23 const name = e.target.name; 24 const value = e.target.value; 25 const id = e.target.id; 26 this.setState({ 27 [name]: value, 28 message: {[id]: this.validator(id, value)} 29 }); 30 }; 31 32 validator(id, value){ 33 switch (id) { 34 case 'one': 35 return this.validationOne(value); 36 case 'two': 37 return this.validationTwo(value); 38 case 'three': 39 default: 40 } 41 } 42 43 validationOne(value){ 44 if (value.length > 50) return '50文字を超えています'; 45 } 46 47 validationTwo(value){ 48 if (value.length > 50) return '50文字を超えています'; 49 } 50 51 validationThree(value){ 52 if (value.length > 50) return '50文字を超えています'; 53 } 54 55 handleClick = (e) => { 56 e.preventDefault(); 57 let data = { 58 "list_one": this.state.list_one, 59 "list_two": this.state.list_two, 60 "list_three": this.state.list_three, 61 }; 62 axios.post("http://hoge", data) 63 .then((res) => { 64 this.props.history.push("/"); 65 }) 66 .catch(error => { 67 console.log(error.response) 68 }); 69 }; 70 71 render() { 72 return ( 73 <div> 74 <form onSubmit={this.handleClick}> 75 <TextField 76 variant="outlined" 77 onChange={this.handleChange} 78 name="list_one" type="text" 79 value={this.state.list_one} 80 id='one' 81 /> 82 <p>{this.state.message.one}</p> 83 {this.state.list_one && <TextField 84 variant="outlined" 85 onChange={this.handleChange} 86 name="list_two" 87 type="text" 88 value={this.state.list_two} 89 id='two' 90 />} 91 <p>{this.state.message.two}</p> 92 {this.state.list_two && <TextField 93 variant="outlined" 94 onChange={this.handleChange} 95 name="list_three" 96 type="text" 97 value={this.state.list_three} 98 id='three' 99 />} 100 <p>{this.state.message.three}</p> 101 <Button 102 type='submit' 103 variant='contained' 104 color='primary' 105 disabled={!this.state.list_one} 106 > 107 Entry 108 </Button> 109 </form> 110 </div> 111 ); 112 } 113} 114 115export default Form;

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

stateでエラーメッセージを管理するのではなく、50文字以上の時にエラー文をreturnする関数をrender内で呼び出すことで実現できました。

React

1import axios from "axios"; 2import React from "react"; 3import TextField from '@material-ui/core/TextField'; 4import Button from '@material-ui/core/Button'; 5 6class Form extends React.Component { 7 constructor(props) { 8 super(props); 9 10 this.state = { 11 list_one: "", 12 list_two: "", 13 list_three: "" 14 } 15 }; 16 } 17 18 handleChange = (e) => { 19 const name = e.target.name; 20 const value = e.target.value; 21 this.setState({[name]: value}); 22 }; 23 24 validationOne(){ 25 if (this.state.list_one.length > 50) return '50文字を超えています'; 26 } 27 28 validationTwo(){ 29 if (this.state.list_two.length > 50) return '50文字を超えています'; 30 } 31 32 validationThree(){ 33 if (this.state.list_three.length > 50) return '50文字を超えています'; 34 } 35 36 handleClick = (e) => { 37 e.preventDefault(); 38 let data = { 39 "list_one": this.state.list_one, 40 "list_two": this.state.list_two, 41 "list_three": this.state.list_three, 42 }; 43 axios.post("http://hoge", data) 44 .then((res) => { 45 this.props.history.push("/"); 46 }) 47 .catch(error => { 48 console.log(error.response) 49 }); 50 }; 51 52 render() { 53 return ( 54 <div> 55 <form onSubmit={this.handleClick}> 56 <TextField 57 variant="outlined" 58 onChange={this.handleChange} 59 name="list_one" type="text" 60 value={this.state.list_one} 61 id='one' 62 /> 63 <p>{this.validationOne()}</p> 64 {this.state.list_one && <TextField 65 variant="outlined" 66 onChange={this.handleChange} 67 name="list_two" 68 type="text" 69 value={this.state.list_two} 70 id='two' 71 />} 72 <p>{this.validationTwo()}</p> 73 {this.state.list_two && <TextField 74 variant="outlined" 75 onChange={this.handleChange} 76 name="list_three" 77 type="text" 78 value={this.state.list_three} 79 id='three' 80 />} 81 <p>{this.validationThree()}</p> 82 <Button 83 type='submit' 84 variant='contained' 85 color='primary' 86 disabled={!this.state.list_one} 87 > 88 Entry 89 </Button> 90 </form> 91 </div> 92 ); 93 } 94} 95 96export default Form;

投稿2020/12/21 12:47

CHAN_

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問