Q&A
コピペで再現できるコードを提示してください
ホームページのフォームのバリエーションチェックです。
htmlファイルのbodytタグの一番最後に、
という形で、外部に作成したjavascriptファイルを読み込ませました。ファイル名はmain.jsです。
JavaScriptの最初は$(function(){....}ではじめ、htmlにもjqueryを読み込ませました。
class名、id名の確認、どこが変化するのかも確認しましたが、htmlに反映されません。
環境は、Windows10、VScode、microsoftedgeを使っています。
なぜ反映されないのでしょうか？
こちらがhtmlです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header" style="font-family: AoyagiKouzanT;">
<h1><a href="top_page.html">お問い合わせ</a></h1>
<nav id="top-nav">
<ul>
<li><a href="blog.html">その他</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<!--contact-->
<section id="contact">
<div class="kocontact">
<h1>お問い合わせ</h1>
<form>
<div class="form-group">
<label>
E-mail<span class="help-block"></span>
<input type="text" placeholder="email" name="email" class="valid-email"></br>
</label>
</div>
<div class="form-group">
<label>
内容※お名前もお書きください<span class="help-block"></span>
<textarea name="comment" placeholder="ご依頼・ご相談など、何でもお気軽にお書きください。" class="valid-textarea" cols="50" rows="20"></textarea>
</label>
</div>
<div class="form-group">
<label>
<input type="submit" name="submit" value="送信">
</label>
</div>
</form>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
こちらがjavascriptです。
$(function(){
const MSG_TEXT_MAX = '20文字以内で入力してください。';
const MSG_EMPTY = '入力必須です。';
const MSG_EMAIL_TYPE = 'Emailの形式ではありません。';
const MSG_TEXTAREA_MAX = '100文字以内で入力してください。';
$("valid-email").keyup(function(){
var form_g = $(this).closest('.form-group');
if($(this).val().length === 0){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_EMPTY);
}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('help-block').text(MSG_EMAIL_TYPE);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
}
}
);
$(".valid-textarea").keyup(function(){
var form_g = $(this).closest('.form-group');
if($(this).val().length === 0){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_EMPTY);
}else if($(this).val().length > 100){
form_g.removeClass('has-success').addClass('has-error');
form_g.find('.help-block').text(MSG_TEXTAREA_MAX);
}else{
form_g.removeClass('has-error').addClass('has-success');
form_g.find('.help-block').text('');
}
});
});
$("valid-email").keyup(function(){
とりあえず、この頭のセレクタ、クラスをあらわす . が抜けていますので修正するとどうなりますか？
ありがとうございます！！！
いけました！！！！
質問は編集できます。
解決したのならきちんと質問を締めてください。
回答1件
0
コンソールにエラーがでていないなら、書いたjsのソースが
想定した判定とちがう書き方をしているのだと思います
投稿2021/08/06 05:10
総合スコア115012
あなたの回答
tips
プレビュー
