CODEWITHSUNDEEP
jqueryhtmlcss
el mashrafi
el mashrafi

Reputation: 182

Why does nothing happen to form?

$document.ready(function(){




    var form = $("contact_form");
    var FName = $("fname"); //Creates Variables from forms 
    var FNameInfo = $("fnameInfo");
    var LName = $("lname");
    var Tele = $("tele"); 
    var Email = $("email"); 

    FName.blur(validateFName); 

    form.submit (function (){

        if (validateFName & validateSName & validateTele() & validateEmail() ){ //If it passes all of these then return true 

        return true;
    }else  {
                return false;
              }

        }); 

        function validateFName () {
        if (FName.val().length < 5 ){                        
                FName.addClass("error");
                FNameInfo.text("Incorrect Name");
                FNameInfo.addClass("error");
                return: false; 




        }



       else {

                FName.removeClass("error"); 
                FNameInfo.text("Whats your fname" ); 
                FNameInfo.removeClass("error"); 
                return true; 
       }
        }
    }); 




<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8/">
        <title>this is my first</title>
        <link rel = "stylesheet" href = "SecCustom.css" type = "text/css"/> 
        <script type = "application/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type = "application/javascript" src="js/Validation.js"></script>

        <script>

        </script>

    </head>
    <body>


        <div id = "container">
        <form action="" method="get" id = "contact_form">
            <div> 
                      <label for ="name">First Name </label>
                      <input id = "fname" name = "fname" type = "text"/> 
                    <span id = "fnameInfo" > Whats your first name?</span>
           </div>
            <div>
               <label for ="lname">Last Name </label>
               <input id = "lname" name = "lname" type = "text"/> 
               <span id = "lnameInfo" > Whats your last name?</span>
            </div>

            <div>
               <label for ="tele">Telephone </label>
               <input id = "tele" name = "tele" type = "text"/> 
               <span id = "fnameInfo" > Telephone</span>
            </div>

            <div>
               <label for ="email">email </label>
               <input id = "email" name = "email" type = "text"/> 
               <span id = "fnameInfo" > Whats your last email?</span>
            </div>

            <div>
               <input id = "send" name = "send" type = "submit" value = "send"/> 
            </div>


        </form>

        </div>
    </body>
</html>


#contact_form textarea.error{
    background:#f8dbdb;
    border-color: #e77776;


}





#error {

    margin-bottom:20px;
    border:1px solid #efe;


}

Im trying to create a form and am using JQuery for validation im trying to validate the first part of the form which is 'fname' aka first name and nothng seems to happen is there an error with plugin? I copied the Jquery code into a seperate script and created a src path also when I copy and paste the code from the script to HTML page between scripts tag still nothing, I tried to run a test to see if JQuery works by inserting a alert in the HTML file saying "Hello World " and it worked so I am really confused as why does nothing happen :s

Upvotes: 0

Views: 53

Answers (2)

partypete25
partypete25

Reputation: 4413

You've got an error in your JavaScript in the validateFName function

return: false;

should be

return false;

Update your span id's for email and telephone as they are both still

fnameInfo

And as has already been pointed out, update all your jQuery selectors to include the # tag.

Refer to here for help. It doesn't submit because only validateFName is defined but at least it tries to now. https://jsfiddle.net/1xzcq8z9/13/

Upvotes: 0

Andr&#233; Silva
Andr&#233; Silva

Reputation: 1108

You have your selectors wrong.

By doing this:

var form = $("contact_form");

You are selecting the DOM elements whose tag name are equal to "contact_form". You must replace it with:

var form = $("#contact_form");

You should read this tutorial.

Upvotes: 2

Related Questions