#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    13
    Rep Power
    0

    Javascript Validation error!


    I have jquery, implementing AJAX and trying to validate the input in form, but I got into error. I think, it is due to having too much javascript, I don't know. I don't know much about Javascript.
    Here is my code:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Main page</title>
    Javascript Code:
     
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
            $(function() {
                $( "#accordion" ).accordion();
            }); 
        </script>

    <?php
    include('includes/header.inc');
    include('includes/leftColumn.inc');
    ?>
    </head>
    <body>

    <form>
    ...
    ........
    ............
    Javascript Code:
     
    <script>
                            /************************************
                                *Below is the script for AJAX:
                               **********************************/
                               function showHint(str)
                               {
                               if (str.length==0)
                                 { 
                                 document.getElementById("txtHint").innerHTML="";
                                 return;
                                 }
                               if (window.XMLHttpRequest)
                                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                                 xmlhttp=new XMLHttpRequest();
                                 }
                               else
                                 {// code for IE6, IE5
                                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                                 }
                               xmlhttp.onreadystatechange=function()
                                 {
                                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                   {
                                   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                                   }
                                 }
                               xmlhttp.open("GET","gethint.php?q="+str,true);
                               xmlhttp.send();
                               }
                        </script>

    Topping:
    <p><b>Start typing a topping name in the input field below:</b></p>
    <input type="text" onkeyup="showHint(this.value)">
    <p>Suggestions: <span id="txtHint"></span></p>
    </p>
    </div>
    .........
    ........
    Javascript Code:
     
    <script>
                /**************************
                *Validation script:
               *************************/
               function validateForm()
               {
               var x=document.forms["myForm"]["fName"].value;
               if (x==null || x=="")
                 {
                 alert("First name must be filled out");
                 return false;
                 }
                 {
               var x=document.forms["myForm"]["lName"].value;
               if (x==null || x=="")
                 {
                 alert("Last name must be filled out");
                 return false;
                 }
               }  
            </script>

    <input type="submit" value="Submit Order" onsubmit="return validateForm()" />
    </form>
    ........

    ...........

    But javascript validator is not working. it passess somehow. can't solve this problem.

    Any suggestion?
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    The '$this' in the submit handler is meaningless and will throw an error.
    The '$this' is pointless as you are referencing the form elements with the 'x' variable anyway.

    'return error' should not be there. What was it intended to do?

    At a guess I would say you have gotten the syntax between pure Javascript and jQuery confused a bit. Remove both instances of '$this' and the 'return error' line and see if that helps.

    Also, in the future please wrap your code within [highlight=Javascript[color=black]][/color] [/highlight] or [code] [/code] tags, as it makes it much easier to read.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    13
    Rep Power
    0
    Oh! I am sorry, I post after being depressed with my code. ($this) and 'return error' was not meant to be there, it was i who was playing with that but forget to delete while posting. Now, I have edited it.
    is my jquery messing with my javascript validation at the bottom?

    thank you for your time.
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    Count your curly bracers.
    Javascript Code:
    function validateForm() {
    	var f = document.forms["myForm"], fError = '';
     
    	var fn = f["fName"].value;
    	if (fn == null || fn == '') {
    		fError += "* First name\n";
    	}
     
    	var ln = f["lName"].value;
    	if (ln == null || ln == '') {
    		fError += "* Last name\n";
    	}
     
    	if (fError) {
    		fError = "ERROR: Please enter values for the following fields:-\n\n" + fError;
    		alert(fError);
    		return false;
    	}
    }
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo