html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>フォームの練習</title> 6</head> 7<body> 8<div id="container"> 9 <div>ログイン</div> 10 <form action="server.php" method="post"> 11 <p>メールアドレス: <input type="text" name="email" size="50" id="email"><span class="errorMail"></span></p> 12 <p>パスワード: <input type="password" name="password" size="50" id="password"><span class="errorPw"></span></p> 13 <p><input type="submit" value="送信!"></p> 14 <p><input type="hidden" name="user_id" value="12345"></p> 15 </form> 16</div> 17<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 18<script src="javascript.js"></script> 19</body> 20</html>
javascript
1$(function() { 2 $("form").submit(function(){ 3 var checkSubmit = true; 4 var strEmail = $('#email').val(); 5 var strPassword = $('#password').val(); 6 var pattern1 = /^[a-z]/; 7 var pattern2 = /@$/; 8 9 if(strEmail=='') { 10 $('.errorMail').text('文字が入力されていません。'); 11 checkSubmit = false; 12 }else { 13 $('.errorMail').text(''); 14 } 15 16 if(strEmail.indexOf("@") == -1) { 17 $('.errorMail').text('@が含まれていません。'); 18 checkSubmit = false; 19 }else { 20 $('.errorMail').text(''); 21 } 22 23 if(!(pattern1.test(strEmail))) { 24 $('.errorMail').text('最初の文字が半角小文字ではありません。'); 25 checkSubmit = false; 26 }else { 27 $('.errorMail').text(''); 28 } 29 30 if(pattern2.test(strEmail)) { 31 $('.errorMail').text('最後に@文字は入れれません。'); 32 checkSubmit = false; 33 }else { 34 $('.errorMail').text(''); 35 } 36 37 if(strPassword.length < 6 || strPassword.length > 12) { 38 $('.errorPw').text('パスワードは6文字以上、12文字以下で入力して下さい'); 39 checkSubmit = false; 40 }else { 41 $('.errorPw').text(''); 42 } 43 return checkSubmit; 44 }); 45}); 46
今回初めて入力フォームに挑戦していますが、思うように動きません。例えばmailフォームに何も書かなかったときに、errorMailクラスに「文字が入力されていません。」と出力されません。パスワードの方はちゃんと出力されます。この原因を教えていただけますでしょうか?よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/06 05:37