Error messages not appearing

Question

I am validating a form with JS. The validation is supposed to make error messages appear after elements if the name, etc. aren't filled in.

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');
     }

   }
});

Line breaks added for readability.
The first two - the name and the email - get the error messages if they aren't filled in, but the message one doesn't. Why isn't that one working, and how can I make it work.
UPDATE:
The form is not submitting, so the error is there, but the message is not appearing.

score 0 · Accepted Answer · answered Oct 13 '15 at 01:22

0

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

the selector ".msg .error" is not correct(.msg and .error are siblings)

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

works

answered Oct 13 '15 at 01:22

Jin Tim

28
5

No, they are not siblings. Where are you getting that from? – yaakov Oct 14 '15 at 17:36
1

as Ari Gunawan said
tag cannot contain block-level elements (div). browser will end
tag before the
even though you put
inside
– Jin Tim Oct 16 '15 at 01:17

score 0 · Answer 2 · edited May 23 '17 at 12:24

 tag cannot contain block-level elements (div).

This is some explanation: https://stackoverflow.com/a/10763952/4456736

Your code will produce structure like this:

<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>

The  is not inside the . Moreover, they will be a siblings.

If you can control the structure, my suggestion is use <div> tag instead of  tag.

It should be worked:

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>

Error messages not appearing

2 Answers2