SitePoint Sponsor

User Tag List

Results 1 to 25 of 39

Hybrid View

  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,402
    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,402
    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,402
    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,402
    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,402
    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)
    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

  13. #13
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    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?

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When there is an error, or an operation success, display the message for, lets say 3000 ms, and redirect the user to another page, without the user intervention. Needs to be possible to change layout (with CSS?).

  15. #15
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When there is an error, or an operation was concluded with success and the user needs to be modified, a message is displayed for a certain amount of time, and the user gets redirected to another page. The message is on a language file.

  16. #16
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    So, one way to do this using the plugin you suggested (Zebra_Dialog) would be like this:

    1. Include the following files in your page
    HTML Code:
    <script type="text/javascript" src="path/to/zebra_dialog.js"></script>
    <link rel="stylesheet" href="path/to/zebra_dialog.css" type="text/css">
    2. Use an IF statement in your PHP to include the following JS on the page (just before the </body> tag) when needed:
    PHP Code:
    <?php if ($checkToDisplayAlert): ?>
    <script>
    new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', {
        'buttons':  false,
        'modal': false,
        'type': 'error', // You could set this via PHP too
        'auto_close': 3000,
        'onClose':  function() {
            window.location.href = '<?php echo $redirectUrl ?>';
        }
    });
    </script>
    <?php endif; ?>
    I've not had chance to test this on my machine, but it's all taken from the plugin documentation, so should work as expected.

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it from the documentation and couldn't make it to work. I will give it a try. It can't be inserted before the body tag. It needs to be called where the error occurred or where the info needs to be passed to the user. A single page can have from one to 'n' depending of what is going on on the page. Accessing the database for example, yeou can have an error connecting to the server/database, an error on the query, another retrieving the rows, and so on

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said. Tested it (without the if ... endif loop) and does not work. Here is the page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
        <script type="text/javascript" src="js/zebra_dialog.js"></script>
        <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">  
    </head>
      <body>
    <script> 
    new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', { 
        'buttons':  false, 
        'modal': false, 
        'type': 'error', // You could set this via PHP too 
        'auto_close': 3000, 
        'onClose':  function() { 
            window.location.href = '<?php echo $redirectUrl ?>'; 
        } 
    }); 
    </script> 
      </body>
    </html>

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I included everything as you email. I'm sorry but I don't know nothing about jQuery
    The new code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/zebra_dialog.js"></script>
        <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">  </head>
      <body>
    <script> 
    new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', { 
        'buttons':  false, 
        'modal': false, 
        'type': 'error', // You could set this via PHP too 
        'auto_close': 3000, 
        'onClose':  function() { 
            window.location.href = '<?php echo $redirectUrl ?>'; 
        } 
    }); 
    </script> 
      </body>
    </html>
    is this correct now?

  20. #20
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Here's the code for the whole page, based on what you posted. This works fine for me on my machine:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.1.min.js"></script>
      <script type="text/javascript" src="js/zebra_dialog.js"></script>
      <link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">
    </head>
      <body>
        <script> 
        new $.Zebra_Dialog('<?php echo $yourMsgToUser ?>', { 
            'buttons':  false, 
            'modal': false, 
            'type': 'error', // You could set this via PHP too 
            'auto_close': 3000, 
            'onClose':  function() { 
                window.location.href = '<?php echo $redirectUrl ?>'; 
            } 
        }); 
        </script> 
      </body>
    </html>

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I need. Now, do you see any way of reduce this to a two line code (leave most of the code in the header, and just include two lines where the message is to be included: One for the message itself and another one for the redirection). Also how would all the parameters be changed externaly (by PHP?). I would have one script for the error and another one for the info messages.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for getting back to the post. Just one question> The box appears out of nowhere, and disappears going up. Do you have any idea how to make it fade in, fadeout?

    I changed a lot on the CSS, just to keep the essential for me, and did not see anything to change this.

    Sorry to bother you again, but you are my jQuery/javaSript Guru


  23. #23
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    To have the message fade in is easy enough:
    Code JavaScript:
    return new $.Zebra_Dialog(message, { 
        'buttons':  false, 
        'modal': false, 
        'type': type,
        'auto_close': 3000,
        'animation_speed_show': 500,  // Add this line here
        'onClose':  function() { 
            window.location.href = url; 
        } 
    });
    Unfortunately, making the box fade out at the end instead of sliding up isn't that easy, and you'd have to modify the plugin itself

  24. #24
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Lisbon
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That it is great. I would modify the plugin myself if I knew anything about java Script and the plugin were in a readable form.

    But Thank You anyway.


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
  •