Jquery form validator

JavaScript
1

I am trying to have a JQuery validator like the first form of this page:
http://jquery.bassistance.de/validate/demo/

I downloaded the .js files and I created a file, I did put the following .js codes on my file (paths are correct!)

<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>

<script>

 $("#userinfo").validate({
  submitHandler: function(form) {
    form.submit();
  } });

$().ready(function() {
	// validate the comment form when it is submitted
	$("#userinfo").validate();
}


</script>

<style type="text/css">
#userinfo label { width: 250px; }
#userinfo label.error, #userinfo input.submit { margin-left: 253px; }
</style>

Then created a form like this:

<form name="userinfo" id="userinfo" action="" method="POST">
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required />
</form>

but this doesn’t work for me. what wrong I did?

2

Hi,

You need to define some rules or something.

This worked for me:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="http://jquery.bassistance.de/validate/demo/" />
    <title>jQuery validation plug-in - demo</title>
    <script src="../lib/jquery.js"></script>
    <script src="../jquery.validate.js"></script>
    <style type="text/css">
      #userinfo label { width: 250px; }
      #userinfo label.error, #userinfo input.submit { margin-left: 10px; }
      button{ display: block;}
    </style>
  </head>

  <body>
    <form name="userinfo" id="userinfo" action="" method="POST">
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required />
      <button>Submit</button>
    </form>

    <script>
      $().ready(function() {
        $("#userinfo").validate({
          rules: {
            cname: {
              required: true,
              minlength: 2
            }
          }
        });
      });
    </script>
  </body>
</html>
3

Thanks, but how to define rules for 1.phone, 2.state, 3.url 4.email? I believe it has built-in rules that I don’t need to define one myself. please help.

4

Then this should work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="http://jquery.bassistance.de/validate/demo/" />
    <title>jQuery validation plug-in - demo</title>
    <script src="../lib/jquery.js"></script>
    <script src="../jquery.validate.js"></script>
    <style type="text/css">
      #userinfo label { width: 250px; }
      #userinfo label.error, #userinfo input.submit { margin-left: 10px; }
      button{ display: block;}
    </style>
  </head>

  <body>
    <form name="userinfo" id="userinfo" action="" method="POST">
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required />
      <button>Submit</button>
    </form>

    <script>
      $("#userinfo").validate();
    </script>
  </body>
</html>

It might also be a good idea to have a look at the documentation.

5

This one is not working! what is wrong there? Does it work for you?

6

Ok, forget about the second I’d go with first one as is more flexible, but please help how can I have this blue/red icons when validated like the fom below this page:
http://jqueryvalidation.org/number-method
I appreciate your help.

7

I did create a test.php script to query database with $_POST[‘email’] (I tried with $_GET too) and if an email exists it echoes:
{“email”:false}
and in my page I have this rule:

email: {
required: true,
email: true,
minlength: 6,
remote: “test.php”,
},
I tested my script with a post form directly to my script and it works fine, but this rule, is not working, what wrong I did?

8

Woah!

You PM’d me, started another thread regarding jQuery form validator and came back to this one with three unrelated questions.
Let’s slow down.

Could you:
a) repeat your question
b) provide the code you have
c) state what about your code is not working

Then, I’m sure I’ll be able to help.

9

Ok, please just help with this remote thing, I described how i did it and is not working, and my another thread about states as “required” of drop down or text field depends on which radio is chosen?
Thanks a lot in advance.

10

You have to be more precise than “remote thing” and “I described how i did it”
If you make people have to work to help you, then the chances of getting help are considerably lessened.

So again, please:
a) repeat your question
b) provide the code you have
c) state what about your code is not working

11

As described on their documentation about remote method, i created a php script that fetch $_POST[‘mail’] then query the database to see if posted email exists or not, if exists it echoes this json
{“mail”:false}
Then on my form i did set a rule like the one above, my script is test.php so i set
remote : “test.php”
But it doesn’t work. If exists it doedn’t show an error message. I tested my script with a form directly posted to my script and it works fine so what wrong I did in my rule i pasted completely above? Should be get instead of post? Or my json format is wrong or what?

12

That’s much easier to understand.
Thank you!

I had a play around with the validator plugin and managed to get the remote validation working ok for me.

The HTML is quite straight forward:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery validation example</title>
    <style type="text/css">
      #email { margin-right:10px; }
      button{ display: block;}
    </style>
  </head>

  <body>
    <form id="signupForm" method="post" action="/some/url">
      <p>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" />
      </p>
      <p>
        <input class="submit" type="submit" value="Submit"/>
      </p>
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
    <script>
      $("#signupForm").validate({
        rules: {
          email: {
            required: true,
            minlength: 12,
            email: true,
            remote: "check-email.php"
          }
        },
        messages: {
          email: {
            required: "Please enter an email address",
            minlength: "Your email must consist of at least 12 characters",
            email: "Email address invalid",
            remote: "Already taken!"
          }
        }
      });
    </script>
  </body>
</html>

In check-email.php:

<?php
$email = $_GET['email'];

if($email == "myemail@mydomain.de"){
  $retVal = false;
} else {
  $retVal = true;
}

echo json_encode($retVal);
?>

You would have to do something like:

<?php
  $email = $_GET['email'];
  // $retVal = Some database operation which returns a boolean.

  echo json_encode(retVal);
?>

HTH

13

Thanks a lot. solved. I noticed that form page and script should be in the same folder as "remote: " does not accept path like “includes/json.php”…
If you help for my another question in another thread about drop-down and text field requirment based on which radio is chosen, no more question I’ll have.

14

I’m glad you got it sorted :slight_smile:
However, remote() does accept any path you care to give it, so something else must be at play in your page.

For example, this worked just fine for me:

rules: {
  email: {
    required: true,
    minlength: 12,
    email: true,
    remote: "includes/json.php"
  }
},

If you use Chrome to debug this, you can open the network tab of the dev tools and inspect what is going on under the hood.
In the attached screenshot you can see the final request was to “j/includes/json.php” and it completed successfully with a status code of 200.
As a happy bonus you can also see which parameters the validation script passed to the PHP script.

15

Thanks. Isn’t bugzilla of firefox as helpful as this chrome? Can i do this debugging with bugzilla?

16

AFAIK, Bugzilla is server software designed to help you manage software development.
Do you mean Firebug?

If so, then yes, it should be able to do the same thing.

17

Thanks, what about my another question about drop down and text field requirement based on which radio is chosen?