Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

JQuery code to check if a form is filled in error

I am trying to write jquery code, to check that the message input area has been filled in, before the submit button will send the information. If the field is not filled in then a warning alert box will pop up. If it has been filled in, then a thank you alert box will pop up. I can get an alert box to work with: if ($("#search").val() == "") alert ("Empty!");

but I can not get the alert boxes I created to pop up. Can anyone see where I am going wrong?

    HTML 

  <form id="contact" method="post" action="">
  <!--search for person-->
   <div> 
     <input type="text" id="search" name="search"  placeholder="  Search for          
       User">
   </div>


         <!--message area-->
       <div>
          <textarea id="messageText" name="messageText" placeholder="  Message for  
              User"></textarea>
        </div>

    <button id="sendButton">SEND</button>

     <div id="sendAlertText">
         <p>Your message has been sent  </p> <p id="sentCross">&#10006;</p>
      </div>

     <div id="emptyAlertText">
         <p>You need to complete all sections before you can send your  
            message</p> <p id="sentCross2">&#10006;
          </p>
         </div>

         </form>


    CSS

    #sendAlertText, #emptyAlertText {
    display: none;
    display:block;
    position:relative;
    margin: 0 20px;
    z-index: 98;
    height: 100px;
    width: 250px;
    background-color: red;
    text-align: center;
    font-size: 1.5em;
}

#sentCross {
    position: absolute;
    top: -20px;
    right: 2%;
}

#emptyAlertText {
    background-color: green;
}



   JQuery 

   $(document).ready(function() { 

   // MESSAGE INPUT CAN NOT BE BLANK //

  // Hide the alert messages

  $("#sendAlertText").hide();   
 $("#emptyAlertText").hide(); 


  $("#sendButton").click(function() {
    if (($("#search").val() === "") || ($("#messageText").val() === "")) {
      $( "#emptyAlertText" ).fadeIn( "slow" );
       } else {
        $( "#sendAlertText" ).fadeIn( "slow" );
     }


    });
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

When I click the send button the emptyAlertText shows, once I have put information in the form, this message stil shows, not the sendAlertText. Any suggestions appreciated.

1 Answer

Artem Shturkin
PLUS
Artem Shturkin
Courses Plus Student 8,359 Points
Artem Shturkin
Artem Shturkin
Courses Plus Student 8,359 Points

Hi, here is my decision. You just forgot to add event.preventDefault() method. After submitting the form page usually reload. And secondly , it better to add submit event listener , because your code won't work if user submit the form by pressing 'enter' button .

$(document).ready(function() { 

    $("#sendAlertText").hide();   
    $("#emptyAlertText").hide(); 


    $("#sendButton").submit(function(event) { // here I change click event to submit 
        event.preventDefault(); //<--------- that prevent page to reload. 

        if (($("#search").val() === "") || ($("#messageText").val() === "")) {
            $( "#emptyAlertText" ).fadeIn( "slow" );

        } else {
            $( "#sendAlertText" ).fadeIn( "slow" );

        }
    }); // end of event listener

}); //end of  ready function
Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you for your help, it is appreciated. My code would not run in the submit button function. I think that there is a problem with my else statement, as this is not appearing when there is text in the forms. I have either coded this section wrong or there is a mistake in my HTML that I can not see. Any suggestions appreciated.