We Keep Coding

Disable form submit button until all input/textarea fields are filled, without using for loop (no jQuery)

I have the following contact form:
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
In order to disable submit button until all input/textarea fields are filled, I'm using the following code:
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
It works perfectly.
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
But I would like to achieve the same result using methods such .filter, .find, .map or .some - if possible (the best one in terms of performance).
Would you give me some suggestions?

Use the :scope > [name] query string to select children of the form which are input-like, and if .some of them aren't filled, disable the button:
const post = document.querySelector('form');
post.oninput = function() {
post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
.some(input => !input.value.trim())
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
You could also use the required attribute, if it'll suit your needs, though the button won't appear disabled - rather, it'll redirect the user to the next required field:
<form id="post">
<label for="name">Name</label>
<input required id="name" name="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input required id="email" name="email" type="text">
<label for="subject">Object</label>
<input required id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea required id="text" name="text"></textarea>
<button type="submit">Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>

Not able to get textbox value

hi im trying to do something with some input but the input(except municipality) is showing to be empty string. so building will show to be empty even though id fill the textbox. no console errors.
$('#editAddress').submit(function (e) {
e.preventDefault();
var mun = $("#municipalities option:selected").text();
var city = $("#city").val();
var street = $("#street").val();
var building = $("#building").val();
var floor = $("#floor").val();
var addr = $("#address").val();
alert("bldg: "+building);
editAddr( mun,city,street,building,floor,addr);
});
<form id="editAddress" action = '' method = 'post'>
<select id ="municipalities" class ="form_select" placeholder="Municipality">
<option>Select Municipality</option>
<option>Beirut</option>
<option>Mlikh</option>
<option>Haret Hreik</option>
<option>Haret Saida</option>
<option>Jounieh</option>
<option>Baalbeck</option>
<option>Hermel</option>
<option>Tebnine</option>
<option>Jwaya</option>
</select>
<input type="text" name="city" id="city" class="form_input" placeholder="City"/>
<input type="text" name="street" id="street" class="form_input" placeholder="Street"/>
<input type="text" name="building" id="building" class="form_input" placeholder="Building"/>
<input type="text" name="floor" id="floor" class="form_input" placeholder="Floor"/>
<textarea name="address" id="address" class="form_input" placeholder="Address Notes"></textarea>
<input type="submit" name="register" class="form_submit" id="editAddr" value="Edit Address" />
</form>

Hmmmm. Seems to work for me. Be sure that you include the jQuery library, as in below code example.
Go ahead and type something in the building field and it alerts with that data.
Is something else wrong that I did not notice? If so, please leave a comment with that information.
$('#editAddress').submit(function (e) {
e.preventDefault();
var mun = $("#municipalities option:selected").text();
var city = $("#city").val();
var street = $("#street").val();
var building = $("#building").val();
var floor = $("#floor").val();
var addr = $("#address").val();
alert("bldg: "+building);
editAddr( mun,city,street,building,floor,addr);
});
function editAddr(){
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="editAddress" action = '' method = 'post'>
<select id ="municipalities" class ="form_select" placeholder="Municipality">
<option>Select Municipality</option>
<option>Beirut</option>
<option>Mlikh</option>
<option>Haret Hreik</option>
<option>Haret Saida</option>
<option>Jounieh</option>
<option>Baalbeck</option>
<option>Hermel</option>
<option>Tebnine</option>
<option>Jwaya</option>
</select>
<input type="text" name="city" id="city" class="form_input" placeholder="City"/>
<input type="text" name="street" id="street" class="form_input" placeholder="Street"/>
<input type="text" name="building" id="building" class="form_input" placeholder="Building"/>
<input type="text" name="floor" id="floor" class="form_input" placeholder="Floor"/>
<textarea name="address" id="address" class="form_input" placeholder="Address Notes"></textarea>
<input type="submit" name="register" class="form_submit" id="editAddr" value="Edit Address" />
</form>

jQuery already handles that:
var mun = $("#municipalities").val()
Everything else is in order:
$(function() {
$('#editAddress').submit(function (e) {
e.preventDefault();
var mun = $("#municipalities option:selected").text();
var city = $("#city").val();
var street = $("#street").val();
var building = $("#building").val();
var floor = $("#floor").val();
var addr = $("#address").val();
console.log(mun, city, street, building, floor, addr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="editAddress" action = '' method = 'post'>
<select id ="municipalities" class ="form_select" placeholder="Municipality">
<option>Select Municipality</option>
<option>Beirut</option>
<option>Mlikh</option>
<option>Haret Hreik</option>
<option>Haret Saida</option>
<option>Jounieh</option>
<option>Baalbeck</option>
<option>Hermel</option>
<option>Tebnine</option>
<option>Jwaya</option>
</select>
<input type="text" name="city" id="city" class="form_input" placeholder="City"/>
<input type="text" name="street" id="street" class="form_input" placeholder="Street"/>
<input type="text" name="building" id="building" class="form_input" placeholder="Building"/>
<input type="text" name="floor" id="floor" class="form_input" placeholder="Floor"/>
<textarea name="address" id="address" class="form_input" placeholder="Address Notes"></textarea>
<input type="submit" name="register" class="form_submit" id="editAddr" value="Edit Address" />
</form>

Try these steps
1)Try to run the code by removing e.preventDefault();
2)remove form input class from input box and add form-control
<input type="text" name="city" id="city" class="form-control" placeholder="City"/>
<input type="text" name="street" id="street" class="form-control" placeholder="Street"/>
<input type="text" name="building" id="building" class="form-control" placeholder="Building"/>
<input type="text" name="floor" id="floor" class="form-control" placeholder="Floor"/>
<textarea name="address" id="address" class="form-control" placeholder="Address Notes"></textarea>
<input type="submit" name="register" class="form_submit" id="editAddr" value="Edit Address" />

document.getElementById('address').value

Validate a booking form with more than one user record

I need to validate my form using jQuery or JavaScript when the page is submitted.
The conditions to validate my form are:
Name, age, and email of first passenger is compulsory.
If user enters additional names of any 2 to 10 passengers list then it should be mandatory to add age and email IDs of additional passengers.
Email IDs of all passengers should be unique and valid.
The user should agree to the terms and conditions.
Here's my HTML.
<form>
<div>
<input type="text" id="fn1" placeholder="Full Name" />
<input type="number" id="ag1" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em1" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn2" placeholder="Full Name" />
<input type="number" id="ag2" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em2" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn3" placeholder="Full Name" />
<input type="number" id="ag3" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em3" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn4" placeholder="Full Name" />
<input type="number" id="ag4" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em4" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn5" placeholder="Full Name" />
<input type="number" id="ag5" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em5" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn6" placeholder="Full Name" />
<input type="number" id="ag6" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em6" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn7" placeholder="Full Name" />
<input type="number" id="ag7" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em7" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn8" placeholder="Full Name" />
<input type="number" id="ag8" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em8" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn9" placeholder="Full Name" />
<input type="number" id="ag9" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em9" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn10" placeholder="Full Name" />
<input type="number" id="ag10" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em10" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<input type="checkbox" value="Agree to our terms and agreement" />
<input type="submit" value="submit" />
</form>
if ($('#fn1').val() == ""{
event.preventDefault();
$('#fn1').focus();
return
}
if ($('#fn1').val() != "" && ($('#ag1').val() == "" || !emailpattern.test($('#em1').val()))) {
event.preventDefault();
$('#fn1').focus();
return
}
I did this individually for every passenger. I have no code to check unique email IDs.

We can restate the four requirements as follows:
At least one name must be entered.
For each name that has been entered, the age and email address must be specified.
There must be a unique email address for each name.
The "terms and conditions" checkbox must be checked.
The snippet below validates all of these requirements. Note the following.
The HTML contains a single entry which is duplicated when the page loads. The global variable numEntries specifies the desired number of entries in the form.
We use entryCount to keep track of how many names have been entered into the form.
A hash is used to store the name corresponding to each email address. We look up each new email address in this hash to see if a name has already been assigned.
var numEntries = 10;
// Remove whitespace from beginning and end of string.
function strip(s) {
return s.replace(/^\s+|\s+$/, '');
}
window.onload = function () {
// Make ten entries and store them in an array.
var form = document.getElementById('entryForm'),
entry = form.getElementsByTagName('div')[0],
nextSibling = entry.nextSibling,
entries = [entry];
for (var i = 1; i < numEntries; ++i) {
var newEntry = entry.cloneNode(true);
form.insertBefore(newEntry, nextSibling);
entries.push(newEntry);
entry = newEntry;
}
// Make it easy to look up field values for each entry.
entries.forEach(function (entry) {
['name', 'age', 'email', 'phone'].forEach(function (field) {
entry[field] = entry.getElementsByClassName(field)[0];
});
});
// Attach a validation function to the form submission button.
document.getElementById('submitButton').onclick = function () {
if (!document.getElementById('agreementBox').checked) {
alert('Error: you must agree to our terms and conditions.');
return;
}
var entryCount = 0,
emailHash = {};
for (var i = 0; i < numEntries; ++i) {
var entry = entries[i],
name = strip(entry.name.value);
if (strip(entry.name.value) !== '') {
var age = strip(entry.age.value),
email = strip(entry.email.value);
if (age === '' || email === '') {
alert('Error: you must enter the age and email address of ' + name + '.');
return;
}
if (emailHash[email] !== undefined) {
alert('Error: ' + name + ' has the same email address as ' +
emailHash[email] + '. Addresses must be unique.');
return;
}
emailHash[email] = name;
++entryCount;
}
}
if (entryCount == 0) {
alert('Error: you must enter at least one name.');
return;
}
alert('Success! The form has been validated.');
};
};
.agreement {
font-family: sans-serif;
font-size: 12px;
}
<form id="entryForm">
<div>
<input class="name" type="text" placeholder="Full Name" />
<input class="age" type="number" placeholder="Age" />
<select>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input class="email" type="email" placeholder="E-mail" />
<input class="phone" type="number" placeholder="Mobile" />
</div>
<p class="agreement">
<input id="agreementBox" type="checkbox"> Agree to our terms and conditions
</p>
<input id="submitButton" type="submit" value="submit" />
</form>
Below is a version that uses exactly the HTML you posted in your question.
// Remove whitespace from beginning and end of string.
function strip(s) {
return s.replace(/^\s+|\s+$/, '');
}
window.onload = function () {
// Find the entry input areas and store them in an array.
var form = document.getElementsByTagName('form')[0];
var entries = form.getElementsByTagName('div');
for (var i = 0; i < entries.length; ++i) {
var entry = entries[i],
inputs = entry.getElementsByTagName('input');
// Make it easy to look up field values for each entry.
['name', 'age', 'email', 'phone'].forEach(function (field, ix) {
entry[field] = inputs[ix];
});
}
// Attach a validation function to the form submission button.
var inputs = form.getElementsByTagName('input'),
agreementBox = inputs[inputs.length - 2],
submitButton = inputs[inputs.length - 1];
submitButton.onclick = function () {
if (!agreementBox.checked) {
alert('Error: you must agree to our terms and conditions.');
return;
}
var entryCount = 0,
emailHash = {};
for (var i = 0; i < entries.length; ++i) {
var entry = entries[i],
name = strip(entry.name.value);
if (strip(entry.name.value) !== '') {
var age = strip(entry.age.value),
email = strip(entry.email.value);
if (age === '' || email === '') {
alert('Error: you must enter the age and email address of ' + name + '.');
return;
}
if (emailHash[email] !== undefined) {
alert('Error: ' + name + ' has the same email address as ' +
emailHash[email] + '. Addresses must be unique.');
return;
}
emailHash[email] = name;
++entryCount;
}
}
if (entryCount == 0) {
alert('Error: you must enter at least one name.');
return;
}
alert('Success! The form has been validated.');
};
};
form {
font-family: sans-serif;
font-size: 12px;
}
<form>
<div>
<input type="text" id="fn1" placeholder="Full Name" />
<input type="number" id="ag1" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em1" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn2" placeholder="Full Name" />
<input type="number" id="ag2" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em2" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn3" placeholder="Full Name" />
<input type="number" id="ag3" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em3" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn4" placeholder="Full Name" />
<input type="number" id="ag4" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em4" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn5" placeholder="Full Name" />
<input type="number" id="ag5" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em5" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn6" placeholder="Full Name" />
<input type="number" id="ag6" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em6" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn7" placeholder="Full Name" />
<input type="number" id="ag7" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em7" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn8" placeholder="Full Name" />
<input type="number" id="ag8" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em8" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn9" placeholder="Full Name" />
<input type="number" id="ag9" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em9" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<div>
<input type="text" id="fn10" placeholder="Full Name" />
<input type="number" id="ag10" placeholder="Age" />
<select><option value="Male">Male</option><option value="Female">Female</option></select>
<input type="email" id="em10" placeholder="E-mail" />
<input type="number" placeholder="Mobile" />
</div>
<input type="checkbox" value="Agree to our terms and agreement" />
<input type="submit" value="submit" />
</form>

Multiple var textboxes for javascript

I have html textboxes, but for somme reason when I hit submit it doesn't show both neither of the 3
<script type="text/javascript">
function readBox() {
var phone = document.getElementById('phone').value;
var email = document.getElementById('email').value;
alert("You typed " + email, + age, + tShirt);
}
</script>
any ideas why this isn't working?
<form name="readBox" action="/">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="submit" style="display: inline-block;" onClick="readBox()">

Assuming you are only getting value of "You typed " + email
alert("You typed " + email + age + tShirt);
You had many commas. Also, you don't have any element with ID phone, and tShirt variable is not defined.

I think it won't go to the function readBox only. Your form name and function name to be executed onclick are same. That's why it's creating problem.
Change your form name and it should go to that function.
Here I have something which worked for me:-
HTML
<form action="/">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="submit" style="display: inline-block;" onclick="readBox()">
</form>
Javascript
function readBox() {
var age = document.getElementById('age').value;
var email = document.getElementById('email').value;
alert("You typed " + email +" "+ age);
}

you must remove comma in alert.
remove action in form
change function name of script
function read(){
var email = document.getElementById('email').value;
var age = document.getElementById('age').value;
var tShirt = document.getElementById('tShirt').value;
alert("You typed " + email +","+ age+"," + tShirt);
}
`
<form name="readBox">
<label>Age:</label>
<input type="text" id="age" name="age">
<label>T-Shirt Size:</label>
<input type="text" id="tShirt" name="tShirt">
<label>Email Address:</label>
<input type="text" id="email" name="email">
<br />
<input type="button" style="display: inline-block;" onClick="read()" value="submit">

Regular expression login on jQuery form

I have a problem with a regular expression. console.log shows me the login regular expression isn't respected, but my span doesn't show, my email span works.
I think it's a basic JS/jQuery problem, but I couldn't find the solution.
HTML:
<form name="formSignup">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" class="required" />
<label for="prenom">Prenom :</label>
<input type="text" name="prenom" id="prenom" class="required" />
<label for="email">Votre Email:</label>
<input type="email" name="email" id="email" class="required" onclick="spanHide()" />
<label for="username">Login:</label>
<input type="text" name="username" id="username" class="required" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
<input id="Submit1" type="button" value="Login" data-role="button" data-inline="true" data-theme="b" onclick='createuser()' />
</fieldset>
</form>
JS:
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var loginReg= /^[a-zA-Z0-9]+$/;
if (email == '') {
$("#email").after('<span id="errormail" class="error">Please enter your email address.</span>');
}
if (!loginReg.test(myLogin)) {
console.log("error");
$("#username").after('<span id="errorlogin" class="error">only letter + digits plz</span>');
}
if (!emailReg.test(email)) {
$("#email").after('<span id="errormail" class="error">Enter a valid email address.</span>');
}