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. user@example.com",
"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>
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:
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.