Why does nothing happen to form?

650
November 23, 2016, at 9:36 PM
$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

Answer 1

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.

Answer 2

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/

READ ALSO
Convert datetime with Jquery

Convert datetime with Jquery

Well, i'm modifying a board system, and i have this datetime format:.

559
Jquery datatable features shows in delay

Jquery datatable features shows in delay

I am using datatable ver. 1.

435
Emptying and adding new items in the list in jquery

Emptying and adding new items in the list in jquery

I've an jquery mobile list with some list items. I simply want to remove old items and add new items in it dynamically.

398
How to access AngularJS {{curly-brace-value}} in jQuery

How to access AngularJS {{curly-brace-value}} in jQuery

From the question itself, I am sure you understand that I am not an angular/jquery expert. .

338