How validate form data read using JSON?

Question

I am workign creating a form wizard based on JSON data. I have created a form based on JSON feed and I got this working fine, next is how can i incorporate jquery validation.js into my code.

I am using jquery.dfrom to generate a form based on JSON example here https://github.com/daffl/jquery.dform

Next, I want to validate the form generated for user input(s) before it gets submitted.

How can i validate this generated html form? Thanks

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>JSOn based form wizard jQuery dForm</title>
    </head>
    <style type="text/css">
        input, label {
            display: block;
            margin-bottom: 5px;
        }
    </style>
    <body>


    <form id="demo-2-form"></form>


    <!-- Load jQuery and the minified plugin -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="dist/jquery.validate.js"></script>
    <script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>


    <script type="text/javascript" class="demo" id="demo-2">
    $('#demo-2-form').dform({
        "action":"index.html",
        "method":"post",
        "html":[
            {
                "type":"fieldset",
                "caption":"User information",
                "html":[
                    {
                        "name":"email",
                        "caption":"Email address",
                        "type":"text",
                        "placeholder":"E.g. [email protected]",
                        "validate":{
                            "email":true
                        }
                    },
                    {
                        "name":"password",
                        "caption":"Password",
                        "type":"password",
                        "id":"registration-password",
                        "validate":{
                            "required":true,
                            "minlength":5,
                            "messages":{
                                "required":"Please enter a password",
                                "minlength":"At least {0} characters long"
                            }
                        }
                    },
                    {
                        "name":"password-repeat",
                        "caption":"Repeat password",
                        "type":"password",
                        "validate":{
                            "equalTo":"#registration-password",
                            "messages":{
                                "equalTo":"Please repeat your password"
                            }
                        }
                    },
                    {
                        "type":"radiobuttons",
                        "caption":"Sex",
                        "name":"sex",
                        "class":"labellist",
                        "options":{
                            "f":"Female",
                            "m":"Male"
                        }
                    },
                    {
                        "type":"checkboxes",
                        "name":"test",
                        "caption":"Receive newsletter about",
                        "class":"labellist",
                        "options":{
                            "updates":"Product updates",
                            "errors":{
                                "value":"security",
                                "caption":"Security warnings",
                                "checked":"checked"
                            }
                        }
                    }
                ]
            },
            {
                "type":"fieldset",
                "caption":"Address information",
                "html":[
                    {
                        "name":"name",
                        "caption":"Your name",
                        "type":"text",
                        "placeholder":"E.g. John Doe"
                    },
                    {
                        "name":"address",
                        "caption":"Address",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "name":"zip",
                        "caption":"ZIP code",
                        "type":"text",
                        "size":5,
                        "validate":{ "required":true }
                    },
                    {
                        "name":"city",
                        "caption":"City",
                        "type":"text",
                        "validate":{ "required":true }
                    },
                    {
                        "type":"select",
                        "name":"continent",
                        "caption":"Choose a continent",
                        "options":{
                            "america":"America",
                            "europe":{
                                "selected":"true",
                                "id":"europe-option",
                                "value":"europe",
                                "html":"Europe"
                            },
                            "asia":"Asia",
                            "africa":"Africa",
                            "australia":"Australia"
                        }
                    }
                ]
            },
            {
                "type":"submit",
                "value":"Signup"
            }
        ]
    });
    </script>
    </body>
    </html>

Have you tried including the jQuery Validate js file and the code required to initialize it? — user400654
– user400654, Commented Oct 16, 2012 at 14:57

Jeff Escalante · Accepted Answer · 2012-10-16 15:15:54Z

I assume you are referring to this plugin for validation, in which case you need to add classes to the form to tell it which type of validation you are after. It looks from your code example like this is not the exact library you're after, but it should be similar as far as the implementation. In the future, make sure to specify these things - details like this are super important.

The dform plugin does not have a built in callback, so you don't know exactly when the form is on the page. This means any validation plugins that run on the form immediately will be tough to implement because of lack of a callback. On the other hand, if you are working with a validation plugin that works by just attaching an on submit handler to the form anyway, it should work by just calling it with no additional changes to the code, as Kevin B suggested in the first comment.

Either way, as long as you run the validation plugin programmatically once the form is submitted, you'll be fine. You should be able to do this for any decent plugin - the jquery validation one I linked to above does have this ability (although it doesn't do an amazing job with it). You would run it like this:

$('#demo-2-form').on('submit', function(e){
  e.preventDefault();
  if ($(this).validate().form()) {
    $(this).submit();
  } else {
    console.log("fill your form out right man!");
  }
});

This will validate the form according to the parameters you set, but for this particular plugin doesn't give you back a lot of useful information to mark where the errors are. There are other methods you can use to do this (for this plugin you would have to loop through each field a check it for errors), but I figured this was not worth writing out here.

Really, I haven't come across a good javascript validation library (and neither have my coworkers). It might be worth it to catch the submit and write the validations yourself here - it will be more clear this way, and you can customize it the way you want. In addition, each of these validations can be written out in a line or so of javascript. This is usually what I end up doing, and it hardly takes any more time. You can use the same method of catching the submit as above, just replace the jquery validate plugin line with a few lines that check your fields and validate them.

Collectives™ on Stack Overflow

How validate form data read using JSON?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related