事象
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実行というつもりで記述しているのですが、うまくいきません、、、
メールは問題なく送れるのでここの条件分岐の記述が問題と考えています。
宜しくお願いいたします。
あなたの回答
tips
プレビュー