SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery form validator

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

    Code:
    <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?
    Last edited by Pullo; Feb 19, 2014 at 13:36. Reason: Added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    You need to define some rules or something.

    This worked for me:

    Code:
    <!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. #3
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nimasdj View Post
    I believe it has built-in rules that I don't need to define one myself.
    Then this should work:

    Code:
    <!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. #5
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one is not working! what is wrong there? Does it work for you?

  6. #6
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #9
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #11
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

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

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

    Code:
    <?php
      $email = $_GET['email'];
      // $retVal = Some database operation which returns a boolean.
    
      echo json_encode(retVal);
    ?>
    HTH

  13. #13
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nimasdj View Post
    I noticed that form page and script should be in the same folder as "remote: " does not accept path like "includes/json.php"
    I'm glad you got it sorted
    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:

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

    debugging_jquery_validate.png

  15. #15
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Isn't bugzilla of firefox as helpful as this chrome? Can i do this debugging with bugzilla?

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #17
    SitePoint Addict nimasdj's Avatar
    Join Date
    Dec 2007
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, what about my another question about drop down and text field requirement based on which radio is chosen?


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
  •