Create a simple validation form using jQuery

Question

I am trying to create a simple validation form using jQuery. My code currently doesn't do anything, If someone could explain to me what I'm doing wrong I would really appreciate it!

$(function(){
$("#send").click(function(){

var errors = false;

var emailReg = "[a-zA-Z0-9\\.]+@[a-zA-Z0-9\\-\\_\\.]+\\.[a-zA-Z0-9]{3}";

//validate email

$(".errors").remove();

  //refresh error messages on submit

if ($(!"#name").val() === ""){
$("#name").after( "<span class='errors'> Missing Name </span> ")         
     errors= true;               

}

//validate name field has entry

 if (!$( "#email" ).val() === ""){
 $("#email").after("<span class='errors'> Missing Email </span>")         
     errors= true;                            
}

  else if( !emailReg.test($("#email").val())){

    $("#email").after( "<span class='errors'> Not a valid email </span> ") 
    errors = true;
       //validate email field has entry and is a valid
  }



if(errors === true){
    return false;}
else {return true;}

});

});
//validate form

 <!DOCTYPE html>
 <html>

<head>

    <title>Form validate</title>
    <link href="css/style.css" rel='stylesheet'>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

           <body>
               <h1>Get A Quote</h1>

   <form action='contact.php' method="POST">

 <p>*Name:</p><input id="name" type="text" name='name'>
        <br>

    <br>
           <p>*Email:</p> <input id="email" type="text" name="email">
        <br><br>

<p>Budget:<br></p> <input  id="budget" type="text" name="budget">
<br><br>



<p>Describe your project:</p><textarea id="project" name="message" rows="6" cols="55"></textarea><br>
<br><br>

<input class='button send' type="submit" value="Send">

</form>
    <h5>* Required fields</h5>       



    </body>
           <script src=js/val.js></script>
</html>

Answer 1 · 2015-09-21T17:02:09Z

September 21, 2015 5:02pm

The code below would work. You might revisit that regular expression. There are also other changes you could make for performance but I don't want to change your code too much. One of them is that you can cache some of those dom queries that you make repeatedly such as $('#email')

(function($){

$('form').on('submit', function(){

  var errors = false;
  var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i;

  //validate email
  $(".errors").remove();

  //refresh error messages on submit
  if($("#name").val() === ""){
    $("#name").after( "<span class='errors'> Missing Name </span> ");
    errors = true;
  }

  //validate name field has entry
  if($("#email").val() === ""){
    $("#email").after("<span class='errors'> Missing Email </span>");
    errors = true;                            
  }else if(!emailReg.test($("#email").val())){
    $("#email").after( "<span class='errors'> Not a valid email </span> ") 
    errors = true;
  }

  return !errors;

});

})(jQuery);

Also, in your html, put your script tag before the closing body tag.

<script src="js/val.js"></script>
</body>

Welcome to the Treehouse Community

Looking to learn something new?

chris Nelson

chris Nelson

Create a simple validation form using jQuery

LaVaughn Haynes

LaVaughn Haynes

Chyno Deluxe

Chyno Deluxe

1 Answer

LaVaughn Haynes

LaVaughn Haynes

chris Nelson

chris Nelson

LaVaughn Haynes

LaVaughn Haynes

Chyno Deluxe

Chyno Deluxe