Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2014
    Location
    London
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Validation error

    Ok Ladies and Gents I am newb at this-

    so I have created a form which looks like the following:

    Validation error-screen-shot-2014-07-03-21.59.57.jpg

    When the user does not input their email address the following happens and the press the sign in button:

    Validation error-2.jpg

    Same as when the user inputs email and no password and try to sign in they get the following:

    Validation error-3.jpg

    The problem is that when the user does not input their username and enters information in the other fields they get the following screen:

    Validation error-4.jpg

    The javascript for the page is the following:

    jQuery(document).ready(function() {

    $('.page-container form').submit(function(){
    var email = $(this).find('.email').val();
    var password = $(this).find('.password').val();
    var username = $(this).find('.username').val();
    if(email == '') {
    $(this).find('.error').fadeOut('fast', function(){
    $(this).css('top', '27px');
    });
    $(this).find('.error').fadeIn('fast', function(){
    $(this).parent().find('.email').focus();
    });
    return false;
    }
    if(password == '') {
    $(this).find('.error').fadeOut('fast', function(){
    $(this).css('top', '96px');
    });
    $(this).find('.error').fadeIn('fast', function(){
    $(this).parent().find('.password').focus();
    });
    return false;
    }
    if(username == '') {
    $(this).find('.error').fadeOut('fast', function(){
    $(this).css('top', '165px');
    });
    $(this).find('.error').fadeIn('fast', function(){
    $(this).parent().find('.username').focus();
    });
    return false;
    }
    });

    $('.page-container form .email, .page-container form .password, .page-container form .username').keyup(function(){
    $(this).parent().find('.error').fadeOut('fast');
    });

    });

    And the html5 code for the page is:

    <!DOCTYPE html>

    <html>
    <head>

    <meta charset="UTF-8">
    <meta name="keywords " content=" ">
    <meta name="author" content=" ">
    <meta name="description" content=" ">

    <title>Bod-Search</title>
    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/supersized.css">
    <link rel="stylesheet" href="assets/css/style.css">

    </head>

    <body>
    <div class="page-container">
    <h1>Register</h1>

    <!-- Form action="", send the form-data to a file e.g"demo_form.asp" -->
    <form action="" form name="rForm" action="bin/registerInfo.php" class="register" onsubmit="return validateForm()" method="post">
    <input type="email" name="email" id="email" class="email" placeholder="Email">
    <input type="password" name="password" id="password" class="password" placeholder="Password">
    <input type="text" name="username" id="username" class="username" placeholder="Username">

    <button type="submit">Sign me in</button>
    <button onclick="location.href='index.html'">Login</button>
    <div class="error"><span>+</span></div>
    </form>

    <!-- Javascript -->
    <script src="assets/js/jquery-1.8.2.min.js"></script>
    <script src="assets/js/supersized.3.2.7.min.js"></script>
    <script src="assets/js/supersized-init.js"></script>
    <script src="assets/js/scripts.js"></script>
    </body>

    </html>


    HELP ME PLEASE:
    I have tried to mess around with the javascript to sort the issue any help would be very much appreciated. Also any advice as to how I could improve the validation of the form would be much appreciated.

    For example in the email field currently a user could input "%^*^*&gvsndovns" and they could successfully submit this (if they have put other text in the other fields). Is there a code I could implement that would make sure that the format of the input data is in the email format (e.g. rtrt@gig.com)

    So I guess there are two questions I am asking at the moment.
    Thank you in advance

    Den-webdev

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Your images are too small to know what is happening, but I can give you this
    <form action="" form name="rForm" action="bin/registerInfo.php" class="register" onsubmit="return validateForm()" method="post">
    has two actions and two forms and uses name instead of id. It should be:
    <form id="rForm" action="bin/registerInfo.php" class="register" onsubmit="return validateForm()" method="post">
    A P.S. -> You have no validateForm() function.

    You put the form inside a div (Not necessary), but you don't close the div.

    You have two submit buttons. Remove this one-
    <!--<button onclick="location.href='index.html'">Login</button>-->
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jun 2014
    Location
    London
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you ever so much, I think it mostly due to me not closing the div.

    Oh and thanks also you were right about the validateForm() function. I had deleted the javascript for it earlier on.

    Once again cheers for taking your time out to go through my code and solve my problem.

    Can you direct me to the thank you button on the site so that I can thank you officially.

    Cheers


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •