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
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Newbie: Can you help me with my Java script validation problem, please

    Ok Ladies and Gents I am newb at this-

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

    Newbie: Can you help me with my Java script validation problem, please-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:

    Newbie: Can you help me with my Java script validation problem, please-2.jpg

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

    Newbie: Can you help me with my Java script validation problem, please-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:

    Newbie: Can you help me with my Java script validation problem, please-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
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by den-webdev View Post
    So I guess there are two questions I am asking at the moment.
    And both of thos questions are in the wrong forum. I don’t see how that belongs into the HTML/CSS section; moving to JavaScript frameworks (since this involves jQuery).

  • #3
    New Coder
    Join Date
    Jun 2014
    Location
    London
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, thank you (I was wondering why I was getting no answers, silly me. lol)


  •  

    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
    •