Develop Reference

Jquery Valid() function only apply on 1st element

I am intend to use javascript to submit the form. Before I want to submit the form, I need to validate my form.
The following is my code :
alert("OP Please edit me to add the validation script code, cdn link or something. Add code that triggers the validation.");
function validateForm1() {
$("#addMapForm").validate();
$('#addMapForm').valid();
console.log($('#addMapForm').valid());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" required/>
</div>
</div>
</div>
</form>

You are missing names on the inputs. A form will only submit named controls and validation plugin won't validate anything without a name
The required fields work fine once you add them
$("#addMapForm").validate();
$("#addMapForm").valid();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input name="location" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input name="unit" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea name="address" class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input name="city" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input name="zip" class="form-control" required/>
</div>
</div>
</div>
<button>Submit</button>
</form>

I assume you are using this: https://jqueryvalidation.org/validate/
Have you implemented the rules of validation for other elements?
rules (default: rules are read from markup (classes, attributes, data))
So either you have those defined in HTML or you need to define them inside validate function called before you called .valid().
Here is an examle:
$("#myform").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
In short for more precise help we need all the relevant code or fiddle, plunker a demo showing the example of the problem you are facing.

Try this solution.
$('.form-control').each(function() {
$(this).validate();
$(this).valid();
}

I tried to use the following js to validate all my form, however i know the following code is not the best answer, it only able to show the error message on the first input element.
I am welcome to anyone to post better answer than this.
function validateForm() {
var result = true;
$("#addMapForm").each(function () {
$(this).find(':input').each(function () {
if ($(this).valid() == false) {
result = false;
return;
}
});
});
return result;
}

I gave your form inputs some name attributes. Not sure if you added the actual code to your page, so I did so here. I added a button to trigger just for a demo. I added the simplest bit of CSS.
$("#validateme").on('click', function() {
console.log("validating");
let Validator = $("#addMapForm").validate();
Validator.form();
console.log(Validator.valid());
});
.error { color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" name="location" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" name="address" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" name="zip" required />
</div>
</div>
</div>
<button id="validateme" type="button">Do validate</button>
</form>

How to have HTML controls in same line and not stacking up

I have following code which stacks up the control and thus making 4 line.
I tried removing divs and also applying row class , but still they do not contain in single row.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class ="col-sm-6" >
<div class="panel panel-primary">
<div class="row">
<div>
Out of spec:
</div>
<div>
<input type="text" class="form-control input-md"/>
</div>
<div>
Is Blood dark:
</div>
<div>
<input type="text" class="form-control input-md"/>
</div>
</div>
</div>
</div>
</div>

You can do this:
<div class="row">
<div class ="col-sm-6" >
<div class="panel panel-primary">
<form class="form-inline">
<div calss="form-group">
<label>Out of spec:</label>
<input type="text" class="form-control input-md"/>
</div>
<div class="form-group">
<label>Is Blood dark:</label>
<input type="text" class="form-control input-md"/> </div>
</form>
</div>
</div>
</div>
or this
<div class="row">
<div class ="col-sm-6" >
<div class="panel panel-primary">
<form class="form-inline">
<label>Out of spec:</label>
<input type="text" class="form-control input-md"/>
<label>Is Blood dark:</label>
<input type="text" class="form-control input-md"/>
</form>
</div>
</div>
</div>

this works fine:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class ="col-sm-6" >
<div class="panel panel-primary">
<div class="row">
<div class="col-sm-6">
<label>Out of spec:</label>
<input type="text" class="form-control input-md"/>
</div>
<div class="col-sm-6">
<label>Is Blood dark:</label>
<input type="text" class="form-control input-md"/>
</div>
</div>
</div>
</div>
</div>

does not show error in my captcha code as security code does not match

<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">
<form name="review" ACTION="playing-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000"></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" class="btn1" name="submit" id="send">
</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>
</div>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
my javascript code is written above html code but in this code i m writing below html code ......
does it effect my calling my function of captcha
does not show me error like security does not match?
if i click n submit button it redirect me to the thank you page
what is the problem with captcha validation
why it is not validation the match not done correctly
why it is directly accepting the form without validating the capctha?
what is the problem n the code?
cannot identify the error pease help me

Create Repeated Fields in jQuery

$(documnet).ready(function(){
$('#more_finance').click(function(){
var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstName" class="control-label">Finance Contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="Finance Contact" class="form-control" autofocus></div>\n\
<img src="/img/deleted-box.png"></div>';
$(add_new).insertAfter( "#finance_1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group finance-contact" id="finance_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Finance Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="finance1" name="finance[]" placeholder="Finance Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_finance" value="Add More">
</div>
I want This Code insert multiple when click Add More Button And Also remove repeated fields

I Find Answer
jQuery(document).ready(function(){
jQuery('#more_senior').click(function(){
var finance_cont1=jQuery('.senior-contact').length;
var finance_cont=finance_cont1+1;
var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstName" class="control-label">Senior Mgmt. Contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="Senior Mgmt. Contact" class="form-control" autofocus></div>\n\
Remove</div>';
jQuery(add_new).insertAfter( "#senior_"+finance_cont1 );
delete_fields();
});
function delete_fields(){
$('.delete_png').on("click",function(){
var class_name=jQuery(this).parent().attr('class');
class_name=class_name.split(' ');
var id_name=jQuery(this).parent().attr('id');
var finance_cont2=jQuery('.'+class_name[1]).length;
var finance_cont3=finance_cont2-1;
var id_first=id_name.split('_');
$('#'+id_name).remove();
delete_fields();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<h4><strong>Senior Mgmt. Contacts</strong></h4>
<div class="form-group senior-contact" id="senior_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Senior Mgmt. Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="Senior Mgmt. Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_senior" value="Add More">
</div>
</div>

Show hidden fields when checkbox is checked?

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}

Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.

Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.