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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Email

Email(電子メール)とは、ネットワークを介してメッセージを送受信するシステム。インターネット上で利用するメールを、Emailと呼ぶ場合が多いです。 インターネットの普及に伴い、現在では一般的なサービスとなっています。文字の他にも、画像、音声、プログラムなどを送受信することが可能です。

React.js

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

Q&A

0回答

745閲覧

reactでemailjsを利用・バリデーションの判定によりメール送信できるようにしたい

takuyahori

総合スコア0

Email

Email(電子メール)とは、ネットワークを介してメッセージを送受信するシステム。インターネット上で利用するメールを、Emailと呼ぶ場合が多いです。 インターネットの普及に伴い、現在では一般的なサービスとなっています。文字の他にも、画像、音声、プログラムなどを送受信することが可能です。

React.js

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

0グッド

0クリップ

投稿2022/06/04 02:31

事象

reactにてポートフォリオサイトを作成しており、contactページにてメール送信機能を実装中。emailjsを使用し、送信ができることは確認できましたが、バリデーションの実装をしたところバリデーションの判定に関わらずメールが送信できてしまう事象が発生。
バリデーションの判定でtrueの時のみメールを送信できるようにしたいので、アドバイス頂けますと幸いです。

contactPage.js

1import React, { useState } from 'react' 2import { send } from 'emailjs-com'; 3 4const ContactPage = () => { 5 6 /* input要素内に文字を入力したときの各属性値の空の変数 */ 7 const initialValues = { name: "", mailAddress: "", message: "" }; 8 9 /* 上記の変数に値を格納していくためのuseState。入力するたびテキストが値として変数に格納される。 */ 10 const [formValues, setFormValues] = useState(initialValues); 11 12 /* 上記の各属性のエラーとそのメッセージ内容を格納するuseState */ 13 const [formErrors, setFormErrors] = useState({}); 14 const [ isSubmit, setIsSubmit ] = useState(false); 15 16 /* フォームにテキストが入力されたら */ 17 const handleChange = (e) => { 18 const { name, value } = e.target; 19 setFormValues({ ...formValues, [name]: value }); 20 }; 21 22 const sendMail = (e) => { 23 e.preventDefault(); 24 //ログイン情報を送信する前にバリデーションチェック 25 /* errorsのuseStateの状態を更新するため。 formValuesに入った値がvalidate関数でエラーかどうか判断される*/ 26 setFormErrors(validate(formValues)); 27 setIsSubmit(true); 28 29 /* メール送信処理 */ 30 if(Object.keys(formErrors).length === 0 ( 31 send( 32 'service_cjhg1c8', 33 'template_u999xnh', 34 { formValues }, 35 'eWFO3EkLuVxWTVWq5' 36 ) 37 )); 38 }; 39 40 /* 各項目バリデーションチェック関数 */ 41 const validate = (values) => { 42 const errors = {}; 43 const regex = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/; 44 if(!values.name) { 45 errors.name = "名前を入力してください。"; 46 } 47 if(!values.mailAddress) { 48 errors.mailAddress = "メールアドレスを入力してください。"; 49 } else if(!regex.test(values.mailAddress)) { 50 errors.mailAddress = "正しいメールアドレスを入力してください。" 51 } 52 if(!values.message) { 53 errors.message = "メッセージを入力してください。"; 54 } 55 return errors; 56 }; 57 58 return ( 59 <section className="contact"> 60 <h1>Contact Form</h1> 61 <hr /> 62 <form className='contact__form' onSubmit={sendMail}> 63 <div className='contact__wrap'> 64 <div className='contact__left'> 65 <div className='contact__field'> 66 <label>Name</label> 67 <input 68 type='text' 69 name='name' 70 value={formValues.name} 71 onChange={(e) => handleChange(e)} 72 /> 73 </div> 74 <p className='contact__error'>{formErrors.name}</p> 75 <div className='contact__field'> 76 <label>Mail</label> 77 <input 78 type='text' 79 name='mailAddress' 80 value={formValues.mailAddress} 81 onChange={(e) => handleChange(e)} 82 /> 83 </div> 84 <p className='contact__error'>{formErrors.mailAddress}</p> 85 </div> 86 <div className='contact__right'> 87 <div className='contact__field'> 88 <label>Message</label> 89 <input 90 type='text' 91 name='message' 92 value={formValues.message} 93 onChange={(e) => handleChange(e)} 94 /> 95 </div> 96 <p className='contact__error'>{formErrors.message}</p> 97 </div> 98 </div> 99 <div className='contact__send'> 100 <button>send</button> 101 {Object.keys(formErrors).length === 0 && isSubmit && ( 102 <div className='content__messageOk'>送信完了しました。</div> 103 )} 104 </div> 105 </form> 106 </section> 107 ) 108}; 109 110export default ContactPage

対象コード

contactPage.js

1const sendMail = (e) => { 2 e.preventDefault(); 3 //ログイン情報を送信する前にバリデーションチェック 4 /* errorsのuseStateの状態を更新するため。 formValuesに入った値がvalidate関数でエラーかどうか判断される*/ 5 setFormErrors(validate(formValues)); 6 setIsSubmit(true); 7 8 /* メール送信処理 */ 9 if(Object.keys(formErrors).length === 0 ( 10 send( 11 'service_cjhg1c8', 12 'template_u999xnh', 13 { formValues }, 14 'eWFO3EkLuVxWTVWq5' 15 ) 16 )); 17 };

上記で送信ボタンを押したらバリデーションチェックをし、大丈夫ならメール送信を実行という記述をしています。
実際にインプットフォームが空出会ったりメールアドレスに@が含まれていないと赤字でエラー文は出るものの、メールは送信されてしまいます。
formErrorsのオブジェクトに格納したエラー文がなかったらsend実行というつもりで記述しているのですが、うまくいきません、、、

メールは問題なく送れるのでここの条件分岐の記述が問題と考えています。

宜しくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問