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:


<!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?

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:

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:

$('#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:

        submitHandler: function(form) {
            form.submit();
        }
    });
  }); // Closing brace and parenthesis is unnecessary

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

Sure, where you set the validation rules, change the email rule to look like this:

rules: {
  contactname: "required",
  email: {
    required: true,
    email: true
  },
  subject: "required",
  message: "required"
},

I think you can also remove this line:

<script src="jquery.validate.pack.js" type="text/javascript"></script>

as it’s not needed.

That did not work. Even if the email is valid, still giving an error message.

This is now the 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.

Solved, but the login form client side validation (basically if the fields are filled) still not working

What happens when try to submit the login form if the fields are not valid?

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)

Could you post the HTML for your login form please?

The jQuery code is already in the posts, the login form is as filow:


<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:


/* 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…

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?

yes they do:


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

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.

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

Thanks for the link - the problem with your login page is on line 176:

        submitHandler: function(form) {
            form.submit();
        }
    });
  }); // Extra closing brace and parenthesis that aren't needed

Does not work for me in either server. The only validation is on the server. never in the client.

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’

Well, let’s try to sort the login page first. This piece of JS is causing a problem:

$('#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.

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.


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

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 if (isset($paymentdurationerror)): ?>
    <META http-equiv="refresh" content="3;URL=http://www.example.com/index.php">
<?php endif; ?>