I am working on javascript/jquery and i have following form and i want to validate
without "validation engine",So how can i validate all fields together ? I tried with following code
async function completeListing(elm)
{
var type= $("input[name='selct-type']:checked").val();
var quantity= $("#number").val();
var price= $("#priice").val();
if(type=="")
{
$("#radio_error").show();
}
if(price=="")
{
$("#price_error").show();
}
if(quantity=="")
{
$("#quantity_error").show();
}
else
{
//further code
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio_error" style="display:none";>Please select any field</div>
<div class="select-type">
<div class="radio">
<input type="radio" name="selct-type" value="sell"/><label>Sell </label>
</div>
<div class="radio">
<input type="radio" name="selct-type" value="auction"/><label>Auction </label>
</div>
</div>
<div id="price_error" style="display:none";>Please enter your price</div>
<input class="form-control" placeholder="Price" id="priice" name="price" type="number" />
<div id="quantity_error" style="display:none";>Please enter quantity</div>
<input class="form-control" id="number" placeholder="quanity" type="number" name="quantity"/>
<input type="submit" name="listing" value="Complete listing" onclick="completeListing(this)" >
You can use .prop('checked') to validate the radio input. It returns true if button is checked otherwise false.
async function completeListing(elm)
{
var type= $("input[name='selct-type']").prop('checked');
var quantity= $("#number").val();
var price= $("#priice").val();
if(type==false)
{
$("#radio_error").show();
}
if(price=="")
{
$("#price_error").show();
}
if(quantity=="")
{
$("#quantity_error").show();
}
else
{
//further code
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio_error" style="display:none";>Please select any field</div>
<div class="select-type">
<div class="radio">
<input type="radio" name="selct-type" value="sell"/><label>Sell </label>
</div>
<div class="radio">
<input type="radio" name="selct-type" value="auction"/><label>Auction </label>
</div>
</div>
<div id="price_error" style="display:none";>Please enter your price</div>
<input class="form-control" placeholder="Price" id="priice" name="price" type="number" />
<div id="quantity_error" style="display:none";>Please enter quantity</div>
<input class="form-control" id="number" placeholder="quanity" type="number" name="quantity"/>
<input type="submit" name="listing" value="Complete listing" onclick="completeListing(this)" >
Related
I would like to do two things:
I want to count the number of inputs that have a value. (doesn't matter if the value is A or X).
Then, count the number of inputs whose value is equal to A
therefore, the results should contain 6 of 14 items
This is what I tried to count the inputs that already have value:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
One possible implementation with jQuery:
let any = 0;
let a = 0;
$(".col input").each((idx, item) => {
if (!item.getAttribute("value")) {
return;
}
if (item.getAttribute("value") == "A") {
a += 1;
}
any += 1;
});
$(".results").html(a + " of " + any + " items")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>
Use the same logic that you made to find the filled inputs, to find the inputs with value A
const filledInputs = $(".col input").filter(function () {
return !!this.value;
}).length;
const inputWithValA = $(".col input").filter(function () {
return this.value === 'A';
}).length;
console.log(filledInputs)
console.log(inputWithValA)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A" />
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="results">6 of 14 items</div>
var $inputs = $(".col input").filter(function() {
return !!$(this).val();
});
var inputsFilled = $inputs.length
var inputsA =$inputs.filter(function() {
return $(this).val() == 'A';
}).length
console.log(inputsFilled)
console.log(inputsA)
$(".results").html(`${inputsA} of ${inputsFilled} are A`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
Here's a minimal solution:
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
Full snippet:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
console.log(filledInputs);
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
Don't mix DOM and jQuery like that
You are looping over one element
Perhaps you meant this:
const $breakdown = $("#breakdown");
const $results = $(".results")
let totalA = 0;
let totalNonEmptyInput = 0;
$(".col").each(function(i, ele) {
const $inputs = $(ele).find("input");
let As = 0;
const notEmpty = $inputs.filter(function() {
const val = this.value.trim();
if (val === "A") {
As++;
totalA++;
}
totalNonEmptyInput += val !== "";
return val !== ""
}).length;
$results.html(`${totalA} of ${totalNonEmptyInput}`)
$breakdown.append(`<li>${(i+1)}: ${notEmpty}/${$inputs.length} - found ${As} A</li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
<ul id="breakdown"></ul>
const cols_ = document.querySelectorAll('.col');
let inputs_val_a = []; // matched input will stored here
cols_?.forEach(function(col,col_i){
col.querySelectorAll('input')?.forEach(function(ipt, ipt_i){
if( ipt.value == 'A' ){
// match
console.log('cols:'+col_i+' input:'+ipt_i+' have value "A"');
inputs_val_a.push(ipt);
}
})
});
document.querySelector('.results').innerHTML = 'there is '+ inputs_val_a.length + ' inputs with value == A';
<div class="results"></div>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
Maybe the easiest method (and marginally more performant than filtering) in vanilla JS is to do three selections: one on all inputs, and then two selections using the value attribute.
const inputs = document.querySelectorAll('input');
const inputsAll = document.querySelectorAll('[value]');
const inputsA = document.querySelectorAll('[value="A"]');
console.log(`${inputsAll.length} of ${inputs.length} items`);
console.log(`${inputsA.length} of ${inputs.length} items`);
<div class="col"> <input type="text" value="A"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text"> <input type="text"> <input type="text"></div><div class="results"></div>
If you want updated counts while you are filling in the fields you could recalculate it in an event driven function:
const inps=$(".col input").get();
$("body").on("input",".col input",upd8);
function upd8(){
[any,A]=inps.reduce((a,c)=> (c.value&&++a[0]&&c.value.toUpperCase()=="A"&&++a[1],a),[0,0]);
$(".results").html(A + " of " + any + " items")
};
upd8();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>
I have multiple forms in a div. I would like to get the values of each form as an array of object in a single click.
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input type="text" class="form-control" id="usr" name="username" />
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lname" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" name="username" />
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender></p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="optradio"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="optradio"
/>Female
</label>
</div>
</div>
</form>
<button type="submit" class="btn btn-primary">Submit</button>
I would like to get the result where exh object has a key called form whose value is the form number and the another key called inputdata which is an object whose keys represnt the input numbers and value are input values:
[{
form:1,
inputdata:{1:"John",2:"John Doe"}
},
{
form:2,
inputdata:{1:"Jane",2:25,3:"female"}
}]
You can probably do the following:
One other option can be to serialize the form data and then get the value of form, but this would work as well
const form = document.querySelectorAll('form');
function submitForm() {
const data = [];
for(let i=0; i<form.length; i++) {
const elements = form[i].elements;
data.push({form: form[i].getAttribute('data-category'), inputData: {}});
for(let j=0; j<elements.length; j++) {
if(elements[j].type !== 'radio') {
data[i].inputData[[elements[j].name]] = elements[j].value;
} else {
if(elements[j].checked) {
data[i].inputData[[elements[j].name]] = elements[j].value;
}
}
}
}
console.log(data);
}
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input type="text" class="form-control" id="usr" name="firstName" />
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lastName" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" name="firstName" />
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender></p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="M"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
valeu="F"
/>Female
</label>
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>
You may use FormData and Object.fromEntries to get the form data easily like below:
const btn = document.querySelector("#submit");
btn.addEventListener("click", () => {
const forms = document.querySelectorAll("form");
const output = [];
forms.forEach(form => {
output.push({
form: form.dataset.category,
inputData: Object.fromEntries(new FormData(form)),
});
});
console.log(output);
});
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input
type="text"
class="form-control"
id="usr"
name="username"
/>
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lname" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text"
class="form-control"
id="usr"
name="username"
/>
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender</p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="1"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="0"
/>Female
</label>
</div>
</div>
</form>
<button id="submit" type="button" class="btn btn-primary">
Submit
</button>
</body>
</html>
I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>
I have this radio button in HTML.
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
${CVendor}
</label>
</div>
Once this option checked, the two fields below should be displayed and are mandatory. How can I achieve this in HTML?
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>
Try this ng-if="c.data.cvendor==='cvendor'".
Radio button sets c.data.cvendor to 'cvendor'. Thus you can control the display of two input fields via ng-if
As for the fields to be mandatory, you can try ng-required="true".
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
</div>
<div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
</div>
Try This code
var checkBox;
function DemoFunctin() {
checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');
if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
textInput1.setAttribute('required','required');
textInput2.setAttribute('required','required');
}
else {
textInput1.removeAttribute('required');
textInput2.removeAttribute('required');
}
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>
<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
You can achieve this by using ng-required. Based on 'c.data.fieldb' value it will become mandatory or non-mandatory. Similarly, for hide and show you can use ng-show / ng-hide.
<div class="form-group is-required">
<label for="fieldb">${FieldB}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>
<div class="form-group is-required">
<label for="fieldc">${FieldC}:</label>
<input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>
In login page i want to create form validation.
i wrote below mentioned code. but it does not work. i want to hide sign up button and show button when all the fields is not empty.
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('input').val();
while(inputsignup != null && !inputsignup.isEmpty()) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="input">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="input">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="input">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="input">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="input">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="input" onblur="Checkemailsignup()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>
above mentioned dont work. please advice what is problem?
var inputsignup = document.getElementsByClassName('inputField') ;
This will return all elements with the specified class.So.You have to loop through the each element and check if the value is empty
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('inputField') ;
var flag = false;
for(var i in inputsignup){
if(inputsignup[i].value== '' ){
flag = true;
}else{
//console.log(inputsignup[i].value);
}
}
if(!flag) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="inputField">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="inputField">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="inputField" onblur="signupbtnactive()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>
<script>
//Set up the event listener to check every input when one changes
$(".group input").change(checkInputs)
//function that checks all the inputs for values
function checkInputs() {
let $signUpButton = $("#signupbtn")
let $inputs = $(".group input")
let numOfEmptyInputs = $inputs.filter((i, input) => !input.value).length
if(numOfEmptyInputs === 0) {
$signUpButton.show()
} else {
$signUpButton.hide()
}
}
</script>