SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery form validations

    Hi

    I'm trying to validate a few forms with jQuery but none works, even if at least one of them was working before. Here is the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <title><?php echo $title['title']; ?></title>
      <base href="http://root.com/divdev/">
      <meta http-equiv="Content-Type" content="text/html; charset=Western (ISO-8895-1)" />
      <link rel="stylesheet" type="text/css" href="css/frontend.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  
      <script src="jquery.validate.pack.js" type="text/javascript"></script>  
        
      <script type="text/javascript">  
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #contactform element
        $("#contactform").validate({
        
            // Specify the validation rules
            rules: {
                contactname: "required",
                email: "required",
                subject: "required",
                message: "required"
              },
    
            // Specify the validation error messages
            messages: {
                contactname: "É obrigatório o preenchimento do seu nome",  
                email: "É obrigatório o preenchimento do seu email",  
                subject: "É obrigatório o preenchimento do assunto da mensagem",  
                message: "É obrigatório o preenchimento da mensagem"  
            ),
      
            submitHandler: function(form) {
                form.submit();
            }
            
        });  
      });  
      </script>  
    
      <script>
        $('#msg').ready(function () {
            setTimeout(function () {
            $('#msg').hide();
            window.location.href = goto;
          }, 3000);
        });
      });
      </script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #addlinkform element
        $("#addlinkform").validate({
        
            // Specify the validation rules
            rules: {
                category: "required",
                company: "required",
                description: "required",
                address: "required",
                county: "required",
                city: "required",
                state: "required",
                country: "required",
                phone: "required",
                email: "required",
                duration: "required"
              },
    
            // Specify the validation error messages
            messages: {
                category: "<?php echo $addlinkinfo['category']; ?>",
                company: "<?php echo $addlinkinfo['company']; ?>",
                email: "<?php echo $addlinkinfo['email']; ?>",
                description: "<?php echo $addlinkinfo['description']; ?>",
                address: "<?php echo $addlinkinfo['address']; ?>",
                county: "<?php echo $addlinkinfo['county']; ?>",
                city: "<?php echo $addlinkinfo['city']; ?>",
                state: "<?php echo $addlinkinfo['state']; ?>",
                country: "<?php echo $addlinkinfo['country']; ?>",
                duration: "<?php echo $addlinkinfo['duration']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #registerform element
        $("#registerform").validate({
        
            // Specify the validation rules
            rules: {
                fname: "required",
                lname: "required",
                email: {
                    required: true,
                    email: true,
                },
                user: {
                    required: true,
                },
                pass1: {
                    required: true,
                },
                pass2: {
                      required: true, 
                      equalTo: "#pass1",
                }
              },
    
            // Specify the validation error messages
            messages: {
                fname: "<?php echo $regerror['fname']; ?>",
                lname: "<?php echo $regerror['lname']; ?>",
                email: {
                    required: "<?php echo $regerror['email']; ?>",
                    email: "<?php echo $regerror['valemail']; ?>",
                },
                user: {
                    required: "<?php echo $regerror['user']; ?>",
                },
                pass1: {
                    required: "<?php echo $regerror['pass1']; ?>",
                },
                pass2: {
                    required: "<?php echo $regerror['pass2']; ?>",
                    equalTo: "<?php echo $regerror['difpass']; ?>",
                },
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
      
      <script>
            // Setup form validation on the #loginform element
            $("#loginform").validate({
        
            // Specify the validation rules
            rules: {
                user: "required",
                pass: "required"
              },
    
            // Specify the validation error messages
            messages: {
                user: "<?php echo $logerror['user']; ?>",
                pass: "<?php echo $logerror['pass']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
      </head>
      <body>
    I keep all the validation code in the header seccion.

    Can any one help me please with this?

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hey reisve,

    For starters, you're including jQuery twice which is probably not what you want. I'd remove the second, older version.

    You've also got a couple of typos in your JS:
    Code JavaScript:
    messages: {
        contactname: "É obrigatório o preenchimento do seu nome",  
        email: "É obrigatório o preenchimento do seu email",  
        subject: "É obrigatório o preenchimento do assunto da mensagem",  
        message: "É obrigatório o preenchimento da mensagem"  
    ), // This should be a curly brace }

    and a bit lower down you've got this:
    Code JavaScript:
    $('#msg').ready(function () {
            setTimeout(function () {
            $('#msg').hide();
            window.location.href = goto;
          }, 3000);
        });
      });  // This closing brace and parenthesis is unnecessary

    and in the very last script block:
    Code JavaScript:
            submitHandler: function(form) {
                form.submit();
            }
        });
      }); // Closing brace and parenthesis is unnecessary

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It did the trick. Thank You.

    I don't know much about jQuery or JavaScript. How would I include the email validation for a proper email format in that code? Can You help me out with this?

    Thank You

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Sure, where you set the validation rules, change the email rule to look like this:
    Code JavaScript:
    rules: {
      contactname: "required",
      email: {
        required: true,
        email: true
      },
      subject: "required",
      message: "required"
    },

    I think you can also remove this line:
    HTML Code:
    <script src="jquery.validate.pack.js" type="text/javascript"></script>
    as it's not needed.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did not work. Even if the email is valid, still giving an error message.

    This is now the code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <title><?php echo $title['title']; ?></title>
      <base href="http://root.com/divdev/">
      <meta http-equiv="Content-Type" content="text/html; charset=Western (ISO-8895-1)" />
      <link rel="stylesheet" type="text/css" href="css/frontend.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        
      <script type="text/javascript">  
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #contactform element
        $("#contactform").validate({
        
            // Specify the validation rules
            rules: {
                contactname: "required",
                email: {
                  required: true,
                  email: true
                },
                subject: "required",
                message: "required"
              },
    
            // Specify the validation error messages
            messages: {
                contactname: "<?php echo $contactinfo['name']; ?>",  
                email: "<?php echo $contactinfo['email']; ?>",  
                subject: "<?php echo $contactinfo['subject']; ?>",  
                message: "<?php echo $contactinfo['message']; ?>"  
            },
      
            submitHandler: function(form) {
                form.submit();
            }
            
        });
      });
      </script>  
    
      <script>
        $('#msg').ready(function () {
            setTimeout(function () {
            $('#msg').hide();
            window.location.href = goto;
          }, 3000);
        });
      </script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #addlinkform element
        $("#addlinkform").validate({
        
            // Specify the validation rules
            rules: {
                category: "required",
                company: "required",
                description: "required",
                address: "required",
                county: "required",
                city: "required",
                state: "required",
                country: "required",
                phone: "required",
                email: {
                  required: true,
                  email: true
                },
                duration: "required"
              },
    
            // Specify the validation error messages
            messages: {
                category: "<?php echo $addlinkinfo['category']; ?>",
                company: "<?php echo $addlinkinfo['company']; ?>",
                email: "<?php echo $addlinkinfo['email']; ?>",
                description: "<?php echo $addlinkinfo['description']; ?>",
                address: "<?php echo $addlinkinfo['address']; ?>",
                county: "<?php echo $addlinkinfo['county']; ?>",
                city: "<?php echo $addlinkinfo['city']; ?>",
                state: "<?php echo $addlinkinfo['state']; ?>",
                country: "<?php echo $addlinkinfo['country']; ?>",
                duration: "<?php echo $addlinkinfo['duration']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
    
      <script>
      // When the browser is ready...
      $(function() {
      
        // Setup form validation on the #registerform element
        $("#registerform").validate({
        
            // Specify the validation rules
            rules: {
                fname: "required",
                lname: "required",
                email: {
                    required: true,
                    email: true,
                },
                user: "required",
                pass1: "required",
                pass2: {
                      required: true, 
                      equalTo: "#pass1",
                }
              },
    
            // Specify the validation error messages
            messages: {
                fname: "<?php echo $regerror['fname']; ?>",
                lname: "<?php echo $regerror['lname']; ?>",
                email: {
                    required: "<?php echo $regerror['email']; ?>",
                    email: "<?php echo $regerror['valemail']; ?>",
                },
                user: {
                    required: "<?php echo $regerror['user']; ?>",
                },
                pass1: {
                    required: "<?php echo $regerror['pass1']; ?>",
                },
                pass2: {
                    required: "<?php echo $regerror['pass2']; ?>",
                    equalTo: "<?php echo $regerror['difpass']; ?>",
                },
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      });
      </script>
      
      <script>
            // Setup form validation on the #loginform element
            $("#loginform").validate({
        
            // Specify the validation rules
            rules: {
                user: "required",
                pass: "required"
              },
    
            // Specify the validation error messages
            messages: {
                user: "<?php echo $logerror['user']; ?>",
                pass: "<?php echo $logerror['pass']; ?>"
            },
            
            submitHandler: function(form) {
                form.submit();
            }
        });
      </script>
      </head>
      <body>
    I also removed some extra lines on top of the HTML header, including the one you suggested.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved, but the login form client side validation (basically if the fields are filled) still not working

  7. #7
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    What happens when try to submit the login form if the fields are not valid?

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing on the client side. The form is submitted and validated on the server (check the user and password against the data base, does not check if the fields are empty)

  9. #9
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Could you post the HTML for your login form please?

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The jQuery code is already in the posts, the login form is as filow:

    Code:
    <div class = "loginform">
      <div class = "loginheader"><?php echo $login['header']; ?></div>
      <div class = "logintext"><?php echo $login['text']; ?></div>
    
      <center>
        <form class = "form" action="login.php" method="post" id="loginform">
        <table width = 100%>
          <tr>
            <td width = 40% class = "loginlabel"><?php echo $login['user']; ?></td>
            <td width = 60%><input class = "logininput" name="user" id="user" type="text" /></td>
          <tr>
            <td class = "loginlabel"><?php echo $login['pwd']; ?></td>
            <td><input class = "logininput" name="pass" id="pass" type="password" /></td>
         </tr>
          <tr>
          <td colspan = "2">&nbsp;</td>
          </tr>
          <tr>
          <td colspan = "2" align = "center"><input class = "loginsubmit" type="submit" value="<?php echo $login['submit']; ?>" /></td>
          </tr>
        </table>
        </form>
      </center>
    </div>
    and the CSS for the login:

    Code:
    /* jQuery Add Link Form*/
    #addlinkform label.error {
      padding-left: 5px;
      font-family:Arial, Helvetica, sans-serif; 
      font-size:10px;
      color:#FB3A3A;
      font-weight:normal;
    }
    
    #addlinkform input.error {
      border: solid 2px #FF0000;
      background:#FDE4E1;
    }
    
    #addlinkform textarea.error {
      border: solid 2px #FF0000;
      background:#FDE4E1;
    }
    It would be nice to inform the user the fields are empty...

  11. #11
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    I've just tried the code you posted, and it works for me.. if one or both of the fields are blank, the form doesn't submit and it displays an error message. I notice your validation errors are set from PHP - have you tried checking that $logerror['user'] and $logerror['pass'] actually contain strings?

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes they do:

    Code:
    $logerror['user'] = 'Introduza um nome de utilizador';
    $logerror['pass'] = 'Introduza a senha';

  13. #13
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Is the page online somewhere that I can see and try? As I said, it works fine on my computer, so it's difficult to know what might be causing the problem.

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately no. It is in my Wamp server in my PC. I is not a big deal for the login page. I may put the page online to start getting feedback (still far way from finished) maybe tomorrow. I you want and don't mind I Will send you a PM when it is online.

    Thank You

  15. #15
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Thanks for the link - the problem with your login page is on line 176:
    Code JavaScript:
            submitHandler: function(form) {
                form.submit();
            }
        });
      }); // Extra closing brace and parenthesis that aren't needed

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does not work for me in either server. The only validation is on the server. never in the client.

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a strange thing. In the contact form validation script, there is also an extra closing brace and parenthesis, like in the login. If I take it out the validation stops working. Only works with that 'extra closing brace and parenthesis'

  18. #18
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Well, let's try to sort the login page first. This piece of JS is causing a problem:
    Code JavaScript:
    $('#msg').ready(function () {
        setTimeout(function () {
            $('#msg').hide();
            window.location.href = goto;
        }, 3000);
    });
    because the variable goto is not set. Should this code even be on the login page? If goto was set, you'd end up navigating away from the page, which I'm pretty sure is not what you want.

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code needs to be in the header. It shows error or info messages as required for na amount of time (3000 ms in this case), like if you enter the wrong login credencials there is a message saying that which is controled by that litle script. I don't see how it can interact with the login form validation.

    Code:
    echo "<script>var goto = 'index.php'</script>";
    echo "<div id = 'msg' class = 'errorbox'>" . $paymentdurationerror['duplicate'] . "</div>";

  20. #20
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by reisve View Post
    I don't see how it can interact with the login form validation.
    Because goto isn't set, it throws an error. The code comes before the validation code for the login form, so I'm guessing it stops the browser getting that far.

    A better way to do the redirect would be to use PHP to include a meta refresh tag in the page:
    PHP Code:
    <?php if (isset($paymentdurationerror)): ?>
        <META http-equiv="refresh" content="3;URL=http://www.example.com/index.php">
    <?php endif; ?>

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does not affect the other validations. Anyway, I'm going to forget that. It is only a login form. It is not that important.
    This method will not display the Error or Info Message. Note the second line. Anyway it is working fine and should not mess with a wining team.

  22. #22
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by reisve View Post
    This method will not display the Error or Info Message. Note the second line.
    The code I posted is only intended to replace the section of JS code that does the redirect, you obviously still need to add the message to the page as well. The problem with using JS for your redirect is that it will break if the user has JS disabled.

    Also, the way your code is written, it throws an error the pages where you're not doing a redirect. Try visiting your login.php page with the browser console open and you can see the error for yourself.

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It gives an error but works. It is the easiest way I found to display an error or info message without have to go to the server and display a page. I tried jQuery alerts but did not work. That was my first choice. I will not change anything else, unless I can make jQuery alert to work

  24. #24
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I find a good jQuery Alert / Information boxes. But could not understand how it works and how I would replace those two lines. would it be possible for you to help me out with it?

    The link for the AlertbBox is http://plugins.jquery.com/?s=jquery+alert+box.

    I would much appreciate

    Thank You

  25. #25
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    OK, so how do you want this to work? If there is an error, you want to display the alertbox with your message, and when the user clicks 'OK' then the page will redirect to another URL, is that correct? And how do you want to trigger the alert?


Bookmarks

Posting Permissions

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