Javascript Validation error!

Dev Shed Forums Sponsor:

December 19th, 2012, 08:03 PM

n3pl3x27

Registered User

Join Date: Dec 2012

Posts: 13

Time spent in forums: 4 h 27 m 9 sec
Reputation 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:

Original - 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>

 
    <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:

Original - 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:

Original - 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>

 
<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?

December 20th, 2012, 04:06 AM

Winters

Super Moderator

Join Date: Jul 2003

Posts: 3,932

Time spent in forums: 1 Month 2 Weeks 2 Days 13 h 8 m 31 sec
Reputation Power: 2632

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] [/highlight] or [code] [/code] tags, as it makes it much easier to read.

December 20th, 2012, 10:28 AM

n3pl3x27

Registered User

Join Date: Dec 2012

Posts: 13

Time spent in forums: 4 h 27 m 9 sec
Reputation 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.

December 20th, 2012, 10:49 AM

Winters

Super Moderator

Join Date: Jul 2003

Posts: 3,932

Time spent in forums: 1 Month 2 Weeks 2 Days 13 h 8 m 31 sec
Reputation Power: 2632

Count your curly bracers.

Javascript Code:

Original - 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; } }

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;
    }
}

Javascript Validation error!

Developer Shed Advertisers and Affiliates