Question

我正在使用JS验证表单。如果没有填写名称等，则验证应该在元素之后显示错误消息。

var contactModal = '<p class="name">Name: <input type="text" autofocus name="name" id="name" class="form-control" id="fd">  <span class="error"></span></p>
<p class="email">Email: <input type="email" name="email" id="email" class="form-control"><span class="error"></span><br> <div class="input-group"><span class="input-group-addon"><input type="checkbox" aria-label="..." name="copy"></span> <input type="text" readonly disabled class="form-control" aria-label="" value="Check here for a copy of your message." style="border:1px solid #ccc !important;cursor:default !important;"></div></p>
<p class="msg">Message: <div class="textarea form-control" id="msg" name="msg" contentEditable style="height:175px;"></div> <span class="error"></span></p></div>';
$("body").append(contactModal);
$("a#contact").click(function(e){ e.preventDefault(); $(".cont").modal(); });
// Handle contact form submission
$(".cont form").submit(function(e){
   var name = $("#name").val();
   var email = $("#email").val();
   var msg = $("#msg").html();
   var errorMsg;
   if(name == "" || email == "" || msg == ""){
     e.stopPropagation();
     e.preventDefault();
     if(name == ""){
       $(".name .error").html("Please enter a name.");
     }
     if(email == ""){
       $(".email .error").html("Please enter an email address.");
     }
     if(msg == ""){
       $(".msg .error").html("Please write a message.");
     } else {
       $(".cont").modal('hide');
     }

   }
});

为了便于阅读，添加了

换行符。
前两个 - 名称和电子邮件 - 如果没有填写错误消息，则会收到错误消息，但消息不会消息。为什么不是那个人工作，我怎样才能使它发挥作用的更新：
表单未提交，因此错误存在，但消息未显示。

Answer 1

$(".msg .error").html("Please write a message.");

选择器“.msg .error”不正确（.msg和.error是兄弟姐妹）

$("#msg+.error").html("Please write a message.");

作品

Answer 2

标记不能包含块级元素（div）。

这是一些解释：https://stackoverflow.com/a/10763952/4456736

您的代码将生成如下结构：

<p class="name">
    Name:
    <input type="text" class="form-control" id="name" name="name" autofocus="">
    <span class="error"></span>
</p>
<p class="email">
    Email:
    <input type="email" class="form-control" id="email" name="email">
    <span class="error"></span>
    <br>
</p>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" name="copy" aria-label="...">
    </span>
    <input type="text" style="border:1px solid #ccc !important;cursor:default !important;" value="Check here for a copy of your message." aria-label="" class="form-control" disabled="" readonly="">
</div>
<p></p>
<p class="msg">Message: </p>
<div contenteditable="" style="height:175px;" name="msg" id="msg" class="textarea form-control"></div>
<span class="error"></span>
<p></p>

不在内。而且，他们将是一个兄弟姐妹。

如果您可以控制结构，我的建议是使用<div>代码而不是代码。

应该有效：

var contactModal = '<div class="cont"><form><div class="name">Name:<input type="text" autofocus name="name" id="name" class="form-control" id="fd"><span class="error"></span></div><div class="email">Email:<input type="email" name="email" id="email" class="form-control"><span class="error"></span><br><div class="input-group"><span class="input-group-addon"><input type="checkbox" aria-label="..." name="copy"></span><input type="text" readonly disabled class="form-control" aria-label="" value="Check here for a copy of your message." style="border:1px solid #ccc !important;cursor:default !important;"></div></div><div class="msg">Message:<div class="textarea form-control" id="msg" name="msg" contenteditable style="height:175px;"></div><span class="error"></span></div><button type="submit">submit</button></form></div>';
$("body").append(contactModal);
$("a#contact").click(function(e){ e.preventDefault(); $(".cont").modal(); });
// Handle contact form submission
$(".cont form").submit(function(e){
   var name = $("#name").val();
   var email = $("#email").val();
   var msg = $("#msg").html();
   var errorMsg;
   if(name == "" || email == "" || msg == ""){
     e.stopPropagation();
     e.preventDefault();
     if(name == ""){
       $(".name .error").html("Please enter a name.");
     }
     if(email == ""){
       $(".email .error").html("Please enter an email address.");
     }
     console.log('a')
     if(msg == ""){
       $(".msg .error").html("Please write a message.");
     } else {
       $(".cont").modal('hide');
     }

   }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

错误消息未显示

2 个答案: