We Keep Coding

Form validation with multiple highlighted fields

I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!

You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})

Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.

The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.

Checkbox doesn't work in form

I have small form with checkbox. When I fill the form and save data to database and try to fill it with another data to save it to database my checkbox doesn't work. It works only when I refresh page. here is code.
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast" style="display: none">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0"
style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"
id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
$('#is_free_breakfast').change(function(){
getIsFree = $('#is_free_breakfast').is(':checked');
if(getIsFree){
$('#price_breakfast').hide();
}else{
$('#price_breakfast').show();
}
});

You will need to explicit reset the form if you are using js handler for form submit (action="").
Something like:
function saveNewBreakfast() {
// submit handler code
// reset the form to initial values
$('#breakfast_validate')[0].reset();
// show/hide the input based on checkbox's initial values
$('#is_free_breakfast').change();
}
NOTE: reset is a HTML DOM Element method (i.e. plain js function), and not
a jQuery one, so $('selector')[0] is used to convert jquery object to DOM element. Or you can use plain js
document.getElementById('breakfast_validate').reset();
Here's a demo:
function saveNewBreakfast() {
// submit hanlder code
alert('saved with price: ' + ($('#breakfast_price').val() || 'free'));
$('#breakfast_validate')[0].reset();
$('#is_free_breakfast').change();
}
$('#is_free_breakfast').change(function() {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').hide();
} else {
$('#price_breakfast').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0" style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;" id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>

$(document).ready(function () {
var html_content = '<label class="control-label">Price</label>' +
'<div class="controls">' +
'<input type="number" min="0"' +
'style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"' +
'name="breakfast_price" id="breakfast_price"> EUR' +
'</div> ';
$('#is_free_breakfast').change(function () {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').empty();
} else {
$('#price_breakfast').html(html_content);
}
});
});
function form_submit(){
var queryString = $('#breakfast_validate').serialize();
console.log(queryString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline">
<input
id="is_free_breakfast" type="checkbox" checked>Is free ?
</label>
</div>
<div class="control-group" id="price_breakfast">
</div>
<div class="control-group">
<button type="button" onclick="form_submit()" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>

knockout js, add additional elements to an array

I have an app where I want to add extra elements to an item in an array, I have created a fiddle of what I'm trying to achieve.
So the user starts the app, they click next fill in some details of an item and a description, they then should click next and fill in a price for the item(this is where I'm stuck). This example works up to a point, as in whenever I try and implement the price part I seem to be getting it wrong. You'll see once I click next the item is added to the array, however how do add more elements to the current item in the array. In case I've not made sense the logic should be:
Start
Page one (enter name and description)
Page two (enter price)
I understand I could do this all on one page but I don't want to I want knockout to be able to add a price after the name and description page. I would also like to be able to go back and amend the item. Can you anybody help in seeing what I should be doing next?
When I insert the name and description, do I have to also make an empty element in the array for the price? Then once the price is entered somehow insert this into the price element in the array? Not sure how/if this should be implemented.
This is my first knockout app so I be surprised if what I've actually done is correct, any help or pointers gratefully received :)
My code is below:
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
// Operations
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled()
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
$('#back').on('click', function(e) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: addItem">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>

Ok, so I have added a new observable to track the page number along with basic functions to increment/decrement the number then I simply add the new item after the price has also been added.
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
this.price = ko.observable(data.itemprice);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
self.newItemPrice = ko.observable();
self.page = ko.observable(1);
// Operations
self.next = function() {
if (self.page() === 2) {
self.addItem();
}
self.page(self.page() + 1)
}
self.back = function() {
if (self.page() == 1) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
}
self.page(self.page() - 1);
}
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled(),
itemprice: this.newItemPrice(),
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: next">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container" data-bind="if: page() == 1">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<div class="container" data-bind="if: page() == 2">
<div class="form-group row">
<label for="inputPrice" class="col-lg-3 col-form-label">Enter Price</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputPrice" data-bind="value: newItemPrice" placeholder="">
</div>
</div>
</div>
<button type="button" data-bind="click: back" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<label for="price">Price</label>
<input id="price" data-bind="value: price" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>

group radio inputs validation

I got little problem with append error state. I got 7 radio inputs and after submit I got 7 error states under group.
Could some one help me figure out how to modify the code.
<form class="register-form">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 margin-top-20">
<h4 class="text-center"> TEST TEST</h4>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>1. QUESTION.</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item" >
<input type="radio" id="case1" name="case" value="0-50" required data-step2="1">
<label for="case1">0 - 50</label>
</div>
<div class="radio-item">
<input type="radio" id="case2" name="case" value="50-100" required data-step2="1">
<label for="case2">50 - 100</label>
</div>
<div class="radio-item">
<input type="radio" id="case3" name="case" value="100+" required data-step2="1">
<label for="case3">Over 100</label>
</div>
</div>
</div>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>2. QUESTION</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item">
<input type="radio" id="resell1" name="resell" value="1" required data-step2="1">
<label for="resell1">YES</label>
</div>
<div class="radio-item">
<input type="radio" id="resell2" name="resell" value="0" required data-step2="1">
<label for="resell2">NO</label>
</div>
</div>
</div>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>3.QUESTION</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item">
<input type="radio" id="export1" name="export" value="1" required data-step2="1">
<label for="export1">YES</label>
</div>
<div class="radio-item">
<input type="radio" id="export2" name="export" value="0" required data-step2="1">
<label for="export2">NO</label>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-top-20 text-center">
<button id="submit-registration" type="submit" class="btn btn-success radius send" >Continue</button>
</div>
</form>
https://jsfiddle.net/13j34o0g/1
thx

I've changed a few things in your code and i think this might be what you are looking for.
Example here
The first code below will loop through you input's why the name attribute. that means it will only run it 3 times
$(".invalid-info").remove(); // Removes the error messages before we run the validation.
var group = {};
$('input[name^="case"], input[name^="resell"], input[name^="export"]').each(function(index) {
var $this = $(this);
var name = this.name;
if (!group[name]) {
group[name] = true;
if (!testRadio($this, options.showValidOnCheck)) validated = false;
}
});
And i changed.
var value = $form.find('input[name="' + name + '"]').is(":checked");
if (!value) {
$('<p class="invalid-info" style="color: red">Please choose corect answer</p>').appendTo($($input).parent().parent())
return false;
}
Let me know if this is what you were looking for.

My validating a captcha using JavaScript is not working

<script>
function validate2(id)
{
var regex = [a-z];
var ctrl = document.getElemetnById(id);
if (regex.test(ctrl.value)) {
return true;
}
else {
return false;
}
}
</script>
<script>
function TestCompanyName(txtCompanyName){
var obj = document.getElementById(txtCompanyName);
var RegEx = /THE DAMN REGULAR EXPRESSION/
if(RegEx.test(obj.value)==false)
{
alert("Invalid");
}
}
</script>
</script>
<script>
function checklname(input1)
{
var pattern=/^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
return pattern.test(input1);
}
if(!isvalid) {
alert('Invalid name');
document.getElementById("input1").value = "";
}
}
</script>
<script>
function phonenumber(telno) {
var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(telno.value.match(phoneno))
{
return true;
}
else {
alert("message");
return false;
}
}
</script>
<script>
function phonenumber2(mobileno) {
var phoneno1 = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(mobileno.value.match(phoneno1))
{
return true;
}
else {
alert("message");
return false;
}
}
</script>
<script>
function validate() {
var ta = document.getElementById("ta").value;
var answer = document.getElementbyId("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1 + digit2;
if(answer == null || answer == ""){
alert("please add the number");
return false;
}else if(answer != sum){
alert("you math is wrong");
}else if(ta == null || ta == ""){
alert("please fill in the textarea");
}else{
document.getElementById("status").innerHTML = "processing";
document.getElementById("answer").innerHTML = "";
}
}
function randomNums(){
var rand_num1 = Math.floor(Math.random() * 10) +1;
var rand_num2 = Math.floor(Math.random() * 10) +1;
document.getElementById("digit1").innerHTML = rand_num1;
document.getElementById("digit2").innerHTML = rand_num2;
}
</script
<script>
function checkEmail(inputvalue){
var pattern=/^([a-zA-Z0-9_.-])+#([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
return pattern.test(inputvalue);
}
checkEmail('rte#co') // false
checkEmail('rte#co.com') // true
</script>
<script>
var address = /^[a-zA-Z0-9-\/] ?([a-zA-Z0-9-\/]|[a-zA-Z0-9-\/] )*[a-zA-Z0-9-\/]$/;
if ( address.test($.trim($('#address').val())) == false)
{
alert('invalid address ');
}
</script>
<script>
function IsValidZipCode(zipcode) {
var isValid = /[\^$%#!#&\*:<>\?\/\\~\{\}\(\)\+|]/.test(zipcode);
if (!isValid){
alert('Invalid ZipCode');
document.getElementById("zipcode").value = "";
}
</script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<?php include("include files/favicon.php"); ?>
</head>
<body itemscope itemtype="http://schema.org/Organization">
<?php
include("include files/header.php");
?>
<?php
include("include files/navigation.php");
?>
<!--breadcrumb-->
<div id='location'>
<div id="BannerAndNavigatorHtmlBlock_StoreNavigator_pnNavigator" itemscope="" itemtype="http://schema.org/BreadcrumbList" class="btn-group btn-breadcrumb">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="btn btn-success">
<a itemprop="item" href="/">
<span class="glyphicon glyphicon-home" itemprop="name">
</span>
</a>
<span itemprop="position" content="1">
</span>
</span>
</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"class="btn btn-success">
<span itemprop="name">Playing Card Quote</span><span itemprop="position" content="2"></span>
</span>
</div>
</div>
<!--Main Content-->
<div class="wrapper">
<div class="container">
<div> </div>
<div class="well">
<form action="thank-you.php" method="post" id="form1" onsubmit="MM_validateForm('quantity','','R','fname','','R','email','','NisEmail','telno','','RisNum','address','','R','city','','R','state','','R','country','','R','zipcode','','R');return document.MM_returnValue && jcap();">
<fieldset>
<legend>
<h1>Fill Quote Form</h1>
</legend>
<div class="quote-form">
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Plastic Coated Paper :</label>
<div class="col-sm-3">
<select class="form-control" name="plastic_coated_paper" id="plastic_coated_paper" onchange="chgSelect('coatedpaper');">
<option selected value="0" id="selectpaper">Select Paper</option>
<option>Black Centered 330</option>
<option>Black Centered 320</option>
<option>Black Centered 315</option>
<option>Black Centered 305</option>
<option>Black Centered 300</option>
<option>Black Centered 280</option>
<option>White Centered 330</option>
<option>White Centered 320</option>
<option>White Centered 315</option>
<option>White Centered 305</option>
<option>White Centered 300</option>
<option>White Centered 280</option>
</select>
</div>
<div class="col-sm-3" style="text-align:center;">
</div>
<br>
<br>
<center>OR</center>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">100% Pure Plastic : </label>
<h2>Your Contact Information :</h2>
<form action="" method="POST">
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> First Name</label>
<div class="col-sm-3">
<div>
<input name="fname" id= "id" type="text" onSubmit="" tabindex="2" required="required">
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Last Name</label>
<div class="col-sm-3">
<div>
<label>
<input name="lname" id="input1" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Email Id</label>
<div class="col-sm-3">
<div>
<label>
<input name="email" type="email" tabindex="2" required="required">
</label>
</div>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
</div>
<div class="col-sm-5">(Please type in a correct email address , as the quotes will be forwarded there)</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Telephone Number</label>
<div class="col-sm-3">
<div>
<label>
<input name="telno" id="telno" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">( Do not enter space)
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Mobile Number</label>
<div class="col-sm-3">
<div>
<label>
<input name="mobileno" id="mobileno" type="text" tabindex="2" required="required">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> <i>*</i> Company Name</label>
<div class="col-sm-3">
<div>
<label>
<input type="text" name="txtCompanyName" id="txtCompanyName" required="required" onclick="TestCompanyName('txtCompanyName')">
</label>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Address</label>
<div class="col-sm-3">
<input id="address" class="address" type="text" name="address"
onchange="IsValidAddress(this.form.address.value)" required="required" >
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Zip Code :</label>
<div class="col-sm-3">
<input id="zipcode" class="zipcode" type="text" name="zipcode" onchange="IsValidZipCode(this.form.zipcode.value)" required="required" >
<br />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> City</label>
<div class="col-sm-3">
<input class="form-control" name="city" type="text" id="city" required="required" value="">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> State</label>
<div class="col-sm-3">
<input class="form-control" name="state" type="text" id="state" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Country</label>
<div class="col-sm-3">
<input class="form-control" name="country" type="text" id="country" value="" required="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> Fax</label>
<div class="col-sm-3">
<input class="form-control" name="fax" type="text" id="fax" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Captcha</label>
<div class="col-sm-2">
</div>
<div class="col-sm-3">
<body>
<form name="review" ACTION="newpg.html" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code ></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</body>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
<input type="submit" value="Submit" class="btn1" name="submit" id="send">
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
I am not able to provide validation for captcha using validation? My function is not displaying message for me if security code did not match or security code should not be empty.
What is the problem in the program? Why is not validating my captcha properly? I tried it many times but not able to validate my captcha code
What is the error in the page for captcha validation? What is the correct validation for captcha ?

The code you posted does not have any issues. It does what it is supposed to do, generate a code and validate that the input matches it before allowing the form to be submitted.
However, if you are really interested in preventing bots from submitting the form, then this code is not going to help you at all. You generate the code on the client and save it in your input. A bot would read that input and provide the captcha with no issues at all.
EDIT: suggestion for recaptcha
I would suggest that you integrate your application with an established recaptcha provider, as is for example recaptcha. Please note that the validation of the captcha input should be performed in your server
You can find further details for recaptcha here.

The code is working as you might expect. Please review the fiddle I had to made no change at all.
https://jsfiddle.net/43m63ezf/
HTML
<label>Captcha</label>
<form name="review" ACTION="palying-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code </font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit" />
</form>
JS
function checkform(theform) {
var why = "";
if (theform.txtInput.value == "") {
why += "- Security code should not be empty.\n";
}
if (theform.txtInput.value != "") {
if (ValidCaptcha(theform.txtInput.value) == false) {
why += "- Security code did not match.\n";
}
}
if (why != "") {
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9) + '';
var b = Math.ceil(Math.random() * 9) + '';
var c = Math.ceil(Math.random() * 9) + '';
var d = Math.ceil(Math.random() * 9) + '';
var e = Math.ceil(Math.random() * 9) + '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha() {
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2) {
return true;
} else {
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string) {
return string.split(' ').join('');
}