If you build forms you know that testing is a necessary evil. If have a lot of html elements on that form you know it feels like you have to visit hell every time you hit the start button. This is a trip that you always say to yourself, “there has to be a better easier way to test my form.” Well there is. It rests in a JQuery plugin called ‘Faker’. This is a great script which helps load random data into your form. It has hooks for every conceivable form input, from bit coin to web address and you can create your own. Once you have done this then testing your form is less painful.
Below is sample on how to implement this great jQuery helper plugin in under 5 steps.
1. Create a blank .js file and call it testdata.js
3. Create a link to it in your page form.
4. Add the following into your testdata.js
[code language=”js”]
$(document).ready(function () {
$(‘<button/>’, {
text: ‘Load Random Data’, //set text 1 to 10
id: ‘prefillTest’,
click: function () {
$.getScript(‘//cdnjs.cloudflare.com/ajax/libs/Faker/0.7.2/MinFaker.js’)
.done(function () {
PreFillForm();
})
.fail(function () {
win.console.error(‘ERROR: FakerJS can not be loaded!’);
});
}
}).appendTo(‘body’);
});
// Load Faker JS library
var runfillform = function () {
}
MyFormData = function (faker) {
this.randomWord = faker.Internet.domainWord();
this.faker = faker;
this.password = ‘pass0000’;
this.address1 = faker.Address.streetAddress();
this.city = faker.Address.city();
this.state = faker.random.br_state_abbr();
this.zip = faker.Address.zipCode();
this.username = ‘user_’ + this.randomWord;
this.name = faker.Name.findName();
};
PreFillForm = function () {
data = new MyFormData(Faker);
$(‘#name’).val(data.name);
$(‘#username’).val(data.username);
$(‘#address’).val(data.address1);
$(‘#city’).val(data.city);
$(‘#state’).val(data.state);
$(‘#zip’).val(data.zip);
$(‘#password’).val(data.password);
}
[/code]
Your html code looks something like this.
[code language=”html”]
<head>
<title></title>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script src="JavaScript.js"></script>
</head><body>
<form id="form1" runat="server">
<div>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name"/>
</div>
<div>
<label for="name">Address:</label>:
<input type="text" name="address" id="address"/>
</div>
<div>
<label for="name">City:</label>:
<input type="text" name="City" id="city"/>
</div>
<div>
<label for="name">State:</label>:
<input type="text" name="state" id="state"/>
</div>
<div>
<label for="name">Zip Code:</label>:
<input type="text" name="zip" id="zip"/>
</div>
<div>
<label for="name">User Name:</label>:
<input type="text" name="username" id="username"/>
</div>
<div>
<label for="name">User Name:</label>:
<input type="password" name="password" id="password"/>
</div>
</div>
</form>
</body>
[/code]
You would separate it into a separate .js file so that when you are ready for production you simply remove the js link file and you are done.
Looking for quality web hosting? Look no further than Arvixe Web Hosting!
