Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By Sasseke

Thread: Form validation using JavaScript, doesn't work

  1. #1
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times

    Form validation using JavaScript, doesn't work

    (I just started this thread, but it seems to have disappeared
    Now I will start typing again..)

    I have a form, with JavaScript (two scripts) in the header, to check for name ("naam") and email address , and for the correct email address ("email").
    But it doesn't seem to do it's job.

    This is the link.

    And this is the HTML (+ SCRIPT):
    <! doctype html>
    <head>
    <title>Kinderattracties.nu</title>
    <link rel="stylesheet" href="Stylesheet.css">
    <script type="text/javascript">
    function validate()
    {

    if( document.formulier.naam.value == "" )
    {
    alert( "Het invullen van uw naam is verplicht" );
    document.formulier.naam.focus() ;
    return false;
    }
    if( document.formulier.email.value == "" )
    {
    alert( "U bent verplicht om een email adres in te vullen" );
    document.formulier.email.focus() ;
    return false;
    }
    return( true );
    }
    </script>

    <script type="text/javascript">
    function validateEmail()
    {

    var emailID = document.formulier.email.value;
    atpos = emailID.indexOf("@");
    dotpos = emailID.lastIndexOf(".");
    if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
    alert("Graag een geldig email adres invullen")
    document.formulier.email.focus() ;
    return false;
    }
    return( true );
    }
    </script>
    </head>
    <body>
    <div id="main">
    <div id="linksboven">
    <img src="logo3.gif" id="logo" />
    </div>

    <div id="rechtsboven">
    <div id="kinderattracties">
    <h1>Kinderattracties.nu</h1>
    </div>
    <br>
    <ul id="linksrechtsboven">
    <li><a href="index.html">Voorwoord</a></li>
    <li><a href="verhuur.html">Verhuur</a></li>
    <li><a href="verkoop.html">Verkoop</a></li>
    <li><a href="prijslijst.html">Prijslijst</a></li>
    <li><a href="veiligheid.html">Veiligheid</a></li>
    <li><a href="nieuws.html">Nieuws</a></li>
    </ul>
    </div>


    <div id="linksonder">
    <div id="linksondertekst">
    <p>
    Wij zijn een bedrijf wat is gespecialiseerd in het bouwen van kinderattracties
    </p>
    </div>
    <div id="contactknop">
    Robert Nieuwland<br>
    Tel.nr: +316-28260019<br>
    Skype: robertnieuwland29<br>
    <a href="mailto:Info@Kinderattracties.nu" id="emailadres">info@kinderattracties.nu</a>
    </div>
    <br>
    <ul id="links">
    <li><a href="contactformulier.html">Contactformulier</a></li>
    </ul>
    <br><br>
    <div id="vlaggen">
    <a href="en/contactformulier_en.html"><img src="english_flag.jpg" /></a><br>
    <span id="taal">English</span>
    </div>
    </div>

    <div id="rechtsonder">
    <div id="rechtsondertekst">
    <h1>CONTACTFORMULIER</h1>
    <form action="send_mail.php" method="post" name="formulier">
    Naam: *<br><input name="naam" type="text" />
    <span class="error">* <?php echo $naamErr;?></span>
    <br><br>
    Aanhef: <br>Heer <input id="heer" name="aanspreking" type="radio" value="mijnheer" />
    mevrouw <input id="mevrouw" name="aanspreking" type="radio" value="mevrouw" />
    <br><br>
    Adres: <br><input name="adres" type="text" />
    <br><br>
    Postcode: <br><input name="postcode" type="text" />
    <br><br>
    Plaats: <br><input name="plaats" type="text" />
    <br><br>
    Telefoon: <br><input name="telefoon" type="text" />
    <br><br>
    Email: *<br><input name="email" type="text" />
    <span class="error">* <?php echo $emailErr;?></span>
    <br><br>
    Opmerkingen / vragen: <br><textarea name="opmerkingen_vragen" rows="12" cols="54">
    </textarea>
    <br><br>
    * verplichte velden<br><br>
    <input type="submit" value="Verstuur" />
    </form>
    </p>
    </div>
    </div>


    <div id="strookjeonderaan">
    <span class="designer">Website gemaakt door</span> <a href="http://www.dianavanlandeghem.nl" target="_new" id="webdesigner">Diana van Landeghem</a>
    </div>
    </div>
    </body>
    </html>


    Can anyone help me with this?
    Sincerely
    Sasseke

  2.  

  3. #2
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    I just typed this:
    <h1>CONTACTFORMULIER</h1>
    <form action="send_mail.php" method="post" name="formulier" onsubmit="return(validate());">


    So, now it runs the function validate().
    I think that I also have to add function validateEmail(). How should I do this?
    Haha it seems that I'm learning on the spot
    Sincerely
    Sasseke

  4. #3
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    I did some research on the internet, and then finally I filled in this:
    <form action="send_mail.php" method="post" name="formulier" onsubmit="return validate() || validateEmail()">

    Now they test them both (filled in something, and filled in a valid email address).
    But it still doesn't seem to work properly. Like I forget to fill in a name, and it says 'you have to fill in a name'. Then I, for example, enter an email address but I (still) don't enter a name. Either I see a pop-up and then immediately the form is sent, or I don't see a pop-up and immediately it is sent.

    So it seems that this is (still) not perfect!
    Can anyone give me an idea/hint on how to let it work really properly/perfectly?
    Sincerely
    Sasseke

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Here's a snippet of your JS:

    Code:
    if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
    alert("Graag een geldig email adres invullen")
    document.formulier.email.focus() ;
    return false;
    }
    return( true );
    }
    Unless there's some shorthand I don't know about, you have some syntax errors here. First, you're missing semicolons. I know the interpreter will technically try to figure out where they should go, and press on, but it's still good practice to put them in. Second, you don't have the "else" in the second part of your conditional. Third, where you're returning true, you're calling return like a function, but there's no function called return.

    So, here's the corrected code for this block:
    Code:
    if (atpos < 1 || ( dotpos - atpos < 2)){
    alert("Graag een geldig email adres invullen");
    document.formulier.email.focus();
    return false;
    } else {
    return true;
    }
    And technically, you don't need the else at all, so you could just do:
    Code:
    if (atpos < 1 || ( dotpos - atpos < 2)){
    alert("Graag een geldig email adres invullen");
    document.formulier.email.focus();
    return false;
    }
    That's just a short snippet. I noticed similar errors in other areas of your code. Correct those errors, then see if you're getting any errors in the developers console.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member Sasseke's Avatar
    Join Date
    Oct 2014
    Location
    Groningen, Netherlands
    Posts
    45
    Member #
    40386
    Liked
    2 times
    Dear Ronald
    now I understand. I copied these codes from the internet, then pasted them in (the header) of my forms. So when I pick some code from the internet, I better validate it before using it on my site(s), instead of thinking that the code is correct because it is on the internet.

    I have corrected my form pages, and now it works perfectly
    I have read books about JavaScript so I should have known this ops:
    From now on I'll keep my focus and read my books/go to codecademy/w3schools so I can better do my homework en solve these things by myself.

    But anyway, thank you very much for your help.
    I wish you a merry Christmas and a happy and healthy 2015.
    Sincerely
    Sass
    Ronald Roe likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com